基本信息
源码名称：Vue的过渡动画
源码大小：1.19KB
文件格式：.html
开发语言：CSS
更新时间：2020-12-14
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
由于HTML本身的没有动画，样式改变较为生硬，加上动画效果更好
<html>
<head>
<meta charset="utf-8" />
<title>列表过渡</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="data"><button @click="addData">追加信息</button>
<div>
<transition-group name="list" tag="p">
<li v-for="tmp in infos" :key="tmp">{{tmp}}</li>
</transition-group>
</div>
</div>
</div>
<script>
window.onload = function() {
new Vue({
el: '#app',
data:{
data:'',
infos:['one','two','three']
},
// ...
methods: {
addData : function(){
this.infos.push(this.data);
this.data='';
}
},
});
}
</script>
</body>
</html>
由于HTML本身的没有动画，样式改变较为生硬，加上动画效果更好
Vue框架之 -- 列表过渡，列表追加信息时，有一个动态的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表过渡</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="data"><button @click="addData">追加信息</button>
<div>
<transition-group name="list" tag="p">
<li v-for="tmp in infos" :key="tmp">{{tmp}}</li>
</transition-group>
</div>
</div>
</div>
<script>
window.onload = function() {
new Vue({
el: '#app',
data:{
data:'',
infos:['one','two','three']
},
// ...
methods: {
addData : function(){
this.infos.push(this.data);
this.data='';
}
},
});
}
</script>
</body>
</html>