关于小球动画问题

Question

1 点击加号按钮的时候不是已经v-show了，为啥在before狗子里还要加el.style.display = ''来显示呢
2 什么是页面重绘？从来没接触过这个概念
3 vue动画什么时候用css的样式形式做动画，什么时候用js钩子做动画，感觉两个都差不多啊？
4关于为啥用两个元素才能做这个飞入动画，能具体解析下什么原因吗？

Answer 1

ustbhuangyi 2020-03-28 18:40:48

1.beforeDrop 的时候，el.style.display 为 none，需要显示的把它设置为 ''。
2.页面重绘的概念想要系统的了解建议去网上搜相关资料，这里需要重绘的原因是：小球本身的位置在购物框中，为了实现从加号位置抛物线下落的效果，我们是先把小球移动到了加号位置，然后再按照一定缓动的动画移回购物车原始位置，如果你不显示的触发重绘，浏览器会认为你这个动画最终还是回到原始位置则不去做动画了。
3. 至于什么时候用 CSS 动画，什么时候 JS 动画的一个原则是能用 CSS 动画实现就用 CSS 动画实现，如果纯 CSS 搞不定，需要依赖 JS 计算的则用 JS 动画。
4.如果一个元素同时做横向和纵向动画，那么叠加出来的效果是出不来抛物线的，建议你自己尝试一下。