由于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>
评论