vue动画-----列表动画

最新推荐文章于 2024-04-04 18:15:30 发布

写代码的小珊子

最新推荐文章于 2024-04-04 18:15:30 发布

阅读量476

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44759289/article/details/101720210

版权

vue 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

vue列表动画如何制作？
1.首先在data中写一组列表，然后通过v-for渲染到页面中（如果要为v-for循环创建的元素设置动画，必须为每一个元素设置:key属性）

 <li v-for="item in list" :key="item.id">
     {{item.id}}-----{{item.name}}
  </li>

2.在实现列表过度时，如果需要过渡的元素，是通过v-for循环渲染出来的，不能
使用transition包裹，需要transitionGroup

     <transition-group>
           <li v-for="item in list" :key="item.id">
                    {{item.id}}-----{{item.name}}
           </li>
    </transition-group>

3.设置动画效果
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leaver-active{
transition: all 0.6s;
}
案例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <style>
        li{
            border:1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding: 5px;
            font-size: 12px;
        }
        li:hover{
            background-color: hotpink;
            transition: all 0.4s ease;
        }

        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leaver-active{
            transition: all  0.6s;       }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" @click="add" value="添加">
        </div>
        <ul>
        <transition-group>
                <li v-for="item in list" :key="item.id">
                        {{item.id}}-----{{item.name}}
                    </li>
        </transition-group>
        </ul>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[
                    {id:1,name:'赵高'},
                    {id:2,name:'秦桧'},
                    {id:3,name:'严嵩'},
                    {id:4,name:'魏忠贤'}

                ]
            },
            methods:{
                add(){
                    this.list.push({id:this.id,name:this.name})
                    this.id=this.name=''
                }
            }
        })
    </script>
</body>
</html>

写代码的小珊子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue动画-----列表动画

vue列表动画如何制作？1.首先在data中写一组列表，然后通过v-for渲染到页面中（如果要为v-for循环创建的元素设置动画，必须为每一个元素设置:key属性） <li v-for="item in list" :key="item.id"> {{item.id}}-----{{item.name}} </li>2.在实现列表过度时，如果需要过渡...
复制链接

扫一扫