<template>
<div>
<button @click="add">显示</button>
<button @click="remove">隐藏</button>
<transition name="lists" > //使用transitio 标签包裹住你想要实现动画的盒子
<span class="list-item" v-show="flag==false">333</span>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
flag:false
};
},
methods: {
add: function() {
this.flag=false
},
remove: function() {
this.flag=true
}
}
};
</script>
<style>
.list-item {
display: inline-block;
margin-right: 10px;
width: 300px;
height: 200px;
background-color: aqua;
}
.lists-enter {
transform: translateX(-100px);
}
.lists-enter-active {
transition: all 1.2s;
}
.lists-enter-to {
transform: translateX(0px);
}
.lists-leave-active {
transition: all 1.2s;
}
.lists-leave-to {
transform: translateX(-480px);
}
</style>
如果看不懂 我是说如果 看不懂代码的可以按照我的代码傻瓜式cv(复制粘贴)到自己的demo上运行一下 就明白了