vue transition过渡效果

Question

我在做模拟饿了么的过程中，遇到了两个动画效果都无法实现预期的效果。一个就是在商品列表页加入购物车的过程中，小球到购物车的一个动画，内层实现了向x轴的移动，但是展示效果上却只是一个y轴的变化；另个一个动画效果是 点击购物车的时候，会有一个向上的弹框。但是实际上，我设置transition3d(0,-100%,0)时，出现了在这个v-show为true的情况下，v-enter-active v-leave-active class被移除。我特别困惑，我把弹框提出来在一个独立的页面调试，是没有问题的，说明应该是本页面的某一个东西影响了这个动画。但是苦于自己能力的问题，调试了很久也没有得到解决，希望得到大家的帮助。
这个是我的项目地址https://github.com/chenqing20...

Answer 1

球的问题

1. 不要用可能相同的值去绑定key。
2. inner-hook应该是以el为根去取，即el.querySelector或el.getElementxxxxx。可能是transition组件机制的问题也可能是key的问题，导致你取到的inner-hook是实际过渡的el后一个元素的。
3. 感觉你的balls数组没起什么作用，可能是有些逻辑没理清楚。

购物车的问题

1. transition动画的样式只负责过渡过程中的，不负责过渡前后的。所以你要把transition3d(0,-100%,0)加到常态样式里。
2. 接上一条，transition样式正常就是会被移除。其中的enter并不是只进入之后的样式，而是过渡过程中的完成进入过渡时的最终临界点的状态，过渡结束就没了。leave同理。

其他问题

好像你有些添加的数据被共用了，导致各商品添加的时候会同增同减？没细看是哪的原因，v-for绑定key是个好习惯。同样，尽量不要用可能相同的值(比如你的初始都是false)去绑定，尽量不要用index去绑定(在列表增删的时候可能会有问题)，尽量使用数据的id或尽可能不会相同的值去绑定。