<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.name" @click="del(i)">{{item.name}}---{{item.ceo}}</li>
</transition-group>
</div>
<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
list:[
{name:'wang',ceo:'shi'},
{name:'zhao',ceo:'fou'}
]
}
})
</script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
</style>
</body>
</html>
vue-其他列表过渡.html
原创
©著作权归作者所有:来自51CTO博客作者虾米大王的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue-其他过渡类名实现.html
【代码】vue-其他过渡类名实现.html。
vue.js javascript 前端 html ci -
vue-其他过渡类名实现2.html
【代码】vue-其他过渡类名实现2.html。
vue.js javascript 前端 html ci -
vue-其他vue-router.html
【代码】vue-其他vue-router.html。
vue.js javascript 前端 html Vue -
vue-其他render函数.html
【代码】vue-其他render函数.html。
javascript vue.js 前端 html Vue -
vue-其他index(javascript).html
【代码】vue-其他index(javascript).html。
javascript html 前端 -
vue-其他axios.html
【代码】vue-其他axios.html。
javascript 前端 java ios html -
vue-其他neilianyangshi.html
【代码】vue-其他neilianyangshi.html。
vue.js javascript 前端 html Vue -
vue-其他计算属性.html
【代码】vue-其他计算属性.html。
vue.js javascript 前端 html Vue -
vue-其他index.html
【代码】vue-其他index.html。
html javascript 前端 vue.js Vue -
vue-其他命名视图.html
【代码】vue-其他命名视图.html。
javascript vue.js 前端 ide Vue -
vue-其他watch监听.html
【代码】vue-其他watch监听.html。
vue.js javascript 前端 html Vue -
vue-其他组件切换.html
【代码】vue-其他组件切换.html。
javascript vue.js 前端 Vue html -
vue-其他vue-router-params.html
【代码】vue-其他vue-router-params.html。
vue.js javascript 前端 Vue html -
vue-其他vue-router3.html
【代码】vue-其他vue-router3.html。
vue.js javascript 前端 Vue html -
vue-其他vue-router4.html
【代码】vue-其他vue-router4.html。
vue.js javascript 前端 Vue html -
vue-其他vue-router2.html
【代码】vue-其他vue-router2.html。
vue.js javascript 前端 html Vue -
vue-例6-6过渡效果.html
【代码】vue-例6-6过渡效果.html。
javascript vue.js 前端 html 过渡效果