html:没有写v-on: afterEnter函数了,因为执行不到,原因是enter的done;

<div class="ball-container">
<transition-group
name="drop"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
>
<div v-for="(ball, index) in balls" v-show="ball.show" class="ball" :key="index+1">
<div class="inner inner-hook"></div>
</div>
</transition-group>
</div>

js:

data() {
return {
balls: [
{show: false}, {show: false}, {show: false}, {show: false}, {show: false}
],
dropBalls: []
};
},

methods: {
drop(el) {
for (let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if (!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
beforeEnter(el) {
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) {
let rect = ball.el.getBoundingClientRect();
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
el.style.display = '';
el.style.webkitTransform = `translate3d(0,${y}px,0)`;
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
inner.style.transform = `translate3d(${x}px,0,0)`;
}
}
},
enter(el, done) {
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight;
this.$nextTick(() => {
el.style.webkitTransform = 'translate3d(0, 0, 0)';
el.style.transform = 'translate3d(0, 0, 0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = `translate3d(0,0,0)`;
inner.style.transform = `translate3d(0,0,0)`;
setTimeout(() => {//原本afterEnter函数里的代码搬到这里执行,算好动画结束后setTimeout执行就可以了
let ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = 'none';
}
clearTimeout();
}, 400);
});
}
}

css:

.ball-container
.ball
position: fixed;
left: 32px;
bottom: 32px;
z-index: 200;
// y轴 贝塞尔曲线
&.drop-enter-active
transition: all 0.4s cubic-bezier(0.5, -0.3, 0.8, 0.3);
// 内层做横向运动
.inner
width: 16px;
height: 16px;
border-radius: 50%;
background-color: rgb(0, 160, 220);
// x轴只要线性缓动
transition: all 0.4s linea

Vue项目实战之改动饿了吗购物小球动画的更多相关文章

  1. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  2. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  3. vue项目实战

    本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...

  4. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

  5. vue项目实战总结

    马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...

  6. vue 项目实战 (入门)

    环境搭建 安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功 ...

  7. 详细记录vue项目实战步骤(含vue-cli脚手架)

    一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...

  8. vue项目实战经验汇总

    目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间 ...

  9. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

随机推荐

  1. 存储系列之 Linux ext2 概述

    引言:学习经典永不过时. 我们之前介绍过存储介质主要是磁盘,先介绍过物理的,后又介绍了虚拟的.保存在磁盘上的信息一般采用文件(file)为单位,磁盘上的文件必须是持久的,同时文件是通过操作系统管理的, ...

  2. 51Nod栈

    LYK有一个栈,众所周知的是这个数据结构的特性是后进先出的. LYK感觉这样子不太美妙,于是它决定在这个前提下将其改进,也就是说,每次插入元素时,可以在栈顶或者栈底插入,删除元素时,只能在栈顶删除.L ...

  3. UVALive5846

    题目大意:见刘汝佳<算法竞赛入门经典——训练指南>P173. 解题思路: 如果要直接求所有单色三角形的个数似乎不简单,正难则反,先求出所有非单色三角形 cnt,answer = C(n,3 ...

  4. mysql Invalid use of group function的解决办法

    错误语句:SELECT s.SID, s.Sname, AVG(a.score)FROM student sLEFT JOIN sc a ON s.SID = a.SID WHERE AVG(a.sc ...

  5. 解决python引包错误

    # coding=utf8# date = 2019/12/23 19:54# 清白丶之年__照林""" # Solve Import Lib Error Add Som ...

  6. 解码问题--leetcode:91 (2019商汤笔试)

    题目:有一种将字母编码成数字的方式:'a'->1, 'b->2', ... , 'z->26'. 现在给一串数字,给出有多少种可能的译码结果. 想法: 该题就是动态规划问题,建议在写 ...

  7. P2812 校园网络

    luogu 传送门 首先考虑问题一 不难想到,如果有一个学校作为终端机,那么跟其处于同一个强联通中的所有学校就可以不用作为终端机了. 那么,问题一也就迎刃而解了:找到所有入度为0的缩点.因为这个学校( ...

  8. [JavaWeb基础] 030.dom4j读取xml的4种方法

    通常我们在项目开发的过程中经常要操作到xml文件,在JAVA这边,我们会很自然的联想到Dom4J这个apache的开源插件,那么我们使用Dom4J如何来读取xml文件呢?下面我们来看看以下4种方法 1 ...

  9. 对于使用progisp软件进行ISP编程时进入不了编程模式的解决方法

    标题: 对于使用progisp软件进行ISP编程时无法进入编程模式的解决方法 作者: 梦幻之心星 347369787@QQ.com 标签: [progisp, 软件] 目录: 软件 日期: 2019- ...

  10. 前端基础知识之html和css全解

    前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...