vue 翻牌子动画_常用的Vue列表transition动画

List的item增加、移除动作的动画

虽然官网有类似动画，但是并不是我今天想说的动画。

横向移除

上图是横向移除的动画，而横向添加动画效果是从左平移入屏幕，下面的item让位，我就不再录制动画了。

竖向移除

上图是竖向移除的动画，而竖向增加是竖向移除的反动画，我就不再录制动画了。

实现动画的方法：

style="width: 20%;"

alt="Vue logo"

src="./assets/logo.png"

@click="click"

/>

{ { item }}

export default {

name: "App",

data() {

return {

list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

};

},

methods: {

click() {

this.list.splice(3, 1);

}

}