vue动画、vue位移动画、vue列表动画

m0_59023231

3602人浏览 · 2022-05-02 15:06:20

m0_59023231 · 2022-05-02 15:06:20 发布

1.vue动画

1.1 vue动画设置

把需要显示隐藏做动画的标签放入transition组件中作为子标签

注意：transition标签要求仅有一个子标签，多余的不会渲染，如果需要在一个组件中实现多种动画效果，需要给transition添加属性name以区分动画

在css中设置动画效果，标签显示和隐藏是两个动画过程，叫做入场和出场。添加transition组件后，vue会自定定义入场和出场效果的class值，通过class设置动画
- 入场:标签的显示过程 v-enter v-enter-active v-enter-to
- 出场:标签的隐藏过程 v-leave v-leave-active v-leave-to

如果需要设置多个标签动画，需要给transition添加属性name，在设置动画效果时，就可以单独设置这个transition的入场和出场，只需要把v-前缀改成name值前缀即可如： .v-enter 改成 .yu-enter

一个标签动画的设置：

 <style>
        .v-enter {
            opacity: 0;
        }
        
        .v-enter-active {
            transition: 2s;
        }
        
        .v-enter-to {
            opacity: 1;
        }
        
        .v-leave {
            opacity: 1;
        }
        
        .v-leave-active {
            transition: 2s;
        }
        
        .v-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <button @click="bool=!bool">显示/隐藏</button>
        <transition>
            <h3 v-if="bool">111</h3>
        </transition>

    </div>
    <script>
        new Vue({
            el: '#myApp',
            data: {
                bool: true
            },
            methods: {

            }
        })
    </script>
</body>

多个标签动画的设置：

<style>
        .jjj-enter,
        .jjj-leave-to {
            opacity: 0;
        }
        
        .jjj-enter-active,
        .jjj-leave-active {
            transition: 2s;
        }
        
        .jjj-enter-to,
        .jjj-leave {
            opacity: 1;
        }
</style>
<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <button @click="bool=!bool">显示/隐藏</button>
        <transition>
            <h3 v-if="bool">111</h3>
        </transition>
        <transition name="jjj">
            <h1 v-if="bool">另一个动画</h1>
        </transition>

    </div>
    <script>
        new Vue({
            el: '#myApp',
            data: {
                bool: true
            },
            methods: {

            }
        })
    </script>
</body>

1.2 vue列表动画设置

transition组件的子标签只能有一个，不能写列表，而transition-group可以写多个子标签。transition-group默认会被渲染成span标签，使用tag属性可指定渲染的标签类型。

transition-group组件中的元素要求必须设置key属性，key属性有两个要求:

必选性，key必须设置，不设置会报错
不变性，key的值一旦设置，不能发生变化，所以在此例中key值不能设置为索引，因为数组从前删除元素时数组的索引会发生变化，造成动画显示异常
key不要求唯一性，即使key值有重复，也可以正常执行

    <style>
        li {
            position: relative;
        }
        
        .v-enter {
            left: 200px;
            opacity: 0;
        }
        
        .v-enter-active {
            transition: 1s;
        }
        
        .v-enter-to {
            left: 0;
            opacity: 1;
        }
        
        .v-leave {
            left: 0;
            opacity: 1;
        }
        
        .v-leave-active {
            transition: 1s;
        }
        
        .v-leave-to {
            left: 200px;
            opacity: 0;
        }
    </style>
</head>

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <button @click="add">添加</button>
        <button @click="del">删除</button>

        <transition-group tag="ul">
            <li v-for="item,i in list" :key="item">项目{{item}}</li>
        </transition-group>
    </div>
    <script>
        new Vue({
            el: '#myApp',
            data: {
                list: []
            },
            methods: {
                add() {
                    this.list.push(parseInt(Math.random() * 100))
                },
                del() {
                    this.list.shift() //删除数组的第一项
                }
            }
        })
    </script>
</body>

1.3vue位移动画

如果 transition-group中的列表长度不变，不涉及显示隐藏和创建销毁，就不能设置入场出场动画。此时只设计列表元素位置的更新，使用v-move设置位移动画即可

  <style>
        .v-move {
            transition: 2s;
        }
    </style>
</head>

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <button @click="reset1">重置排序</button>
        <button @click="reset2">重置反序</button>

        <transition-group tag="ul">
            <li v-for="item,i in list" :key="item">{{item}}</li>
        </transition-group>
    </div>
    <script>
        new Vue({
            el: '#myApp',
            data: {
                list: []
            },
            created() {
                for (var i = 0; i < 10; i++) {
                    this.list.push(Math.random())
                }
            },
            methods: {
                reset1() {
                    this.list.sort()
                },
                reset2() {
                    this.list.reverse()
                }
            }
        })
    </script>
</body>