共计 1470 个字符，预计需要花费 4 分钟才能阅读完成。
进入 / 离开 & 列表过渡
示例一：
<style>
/* 移动的时间 */
.fade-enter-active{transition: all .3s ease;}
/* 移动的方向，和过渡 */
.fade-leave-active{transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
/* 开始和结束的状态 */
.fade-enter,.fade-leave-to{transform: translateX(10px);
opacity: 0;
}
</style>
<body>
<div id="main">
<button v-on:click="ok = !ok"> 点击 </button>
<transition name="fade">
<p v-if="ok"> 侠课岛 -vue 动画课程 </p>
</transition>
</div>
</body>
<script>
var vm = new Vue({
el: '#main',
data: {ok: true}
});
</script>
示例二：
添加与删除数字动画修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 侠课岛 vue- 列表动画 </title>
<script src="Vue.min.js"></script>
<script src="js/lodash.min.js"></script>
<style type="text/css">
.list-item{
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid green;
display: inline-block;
}
.list-enter-active,.list-leave-active{transition: all 1s;}
.list-enter,.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
</head>
<body>
<div id="main">
<button v-on:click="add"> 添加数字 </button>
<button v-on:click="remove"> 删除数字 </button>
<transition-group name="list">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{item}}
</span>
</transition-group>
</div>
</body>
<script>
var vm = new Vue({
el: '#main',
data: {items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
},
methods: {
// 定义一个随机添加的方法
randomIndex: function() {return Math.floor(Math.random() * this.items.length)
},
// 添加数字方法
add: function() {this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
// 删除数字方法
remove: function() {this.items.splice(this.randomIndex(), 1)
},
}
});
</script>
</html>更多学习参考：https://www.9xkd.com/site/sea…
正文完
