Vue3的学习---7

合集 - Vue3的学习(12)
1.Vue3的学习---12.Vue3的学习---23.Vue3的学习---34.Vue3的学习---45.Vue3的学习---56.Vue3的学习---6
7.Vue3的学习---7
8.Vue3的学习---89.Vue3的学习---910.Vue3的学习---1011.Vue3的学习---1112.Vue3的学习---12
收起

7. 动画与过渡

动画与过渡的区别：

  • 过渡：主要用于简单的属性变化，从一个状态平滑过渡到另一个状态。
  • 动画：可以定义复杂的关键帧序列，实现更为复杂和多变的动画效果。

7.1 动画

7.1.1 回顾CSS动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义动画规则 */
        /* @keyframes 是 CSS 中用于定义动画的关键帧规则。boxanimate 是这个动画的名称，可以在其他地方通过这个名称来引用这个动画。 */
        @keyframes boxanimate {
            /* 0% 关键帧：在动画开始时（0%），元素的 transform 属性被设置为 translateX(0)，即元素在水平方向上不移动。 */
            0% {
                transform: translateX(0);
            }
            /* 50% 关键帧：在动画进行到一半时（50%），元素的 transform 属性被设置为 translateX(50px)，即元素在水平方向上向右移动 50 像素。 */
            50% {
                transform: translateX(50px);
            }
            /* 100% 关键帧：在动画结束时（100%），元素的 transform 属性被设置为 translateX(0)，即元素在水平方向上不移动。 */
            100% {
                transform: translateX(0);
            }
        }

        .box {
            /* 用animation样式应用boxanimation规则的动画。该动画在 3 秒钟内使元素在水平方向上从起始位置（0 像素）移动到 50 像素，然后再回到起始位置。 */
            animation: boxanimate 3s;
        }
    </style>
</head>
<body>
    <div class="box">这是会动的文字</div>
</body>
</html>

7.1.2 在Vue中使用CSS动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes boxanimation {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(50px);
            }
            100% {
                transform: translateX(0);
            }
        }

        .box {
            animation: boxanimation 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="{box: isAnimation}">这是会动的文字</div>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isAnimation: true
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

7.1.3 用事件控制动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes boxanimation {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(50px);
            }
            100% {
                transform: translateX(0);
            }
        }

        .box {
            animation: boxanimation 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- @mouseover，鼠标移出事件；@mouseout，鼠标移入事件 -->
        <div :class="{box: isAnimation}" @mouseover="over" @mouseout="out">这是会动的文字</div>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isAnimation: false
                }
            },
            methods: {
                over() {
                    this.isAnimation = true
                },
                out() {
                    this.isAnimation = false
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

7.2 过渡

7.2.1 回顾CSS过渡

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: palegoldenrod;
            /* 过渡样式 */
            transition: 3s;
        }

        .box:hover {
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div class="box">这是会动的文字</div>
</body>

7.2.2 在Vue中实现过渡

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: palegoldenrod;
            transition: 3s;
        }

        .boxmove {
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="{box:true, boxmove:isMove}" @mouseover="over" @mouseout="out">这是会动的文字</div>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isMove: false
                }
            },
            methods: {
                over() {
                    this.isMove = true
                },
                out() {
                    this.isMove = false
                }
            }
        }).mount('#app')
    </script>
</body>

7.3 入场出场的过渡与动画

组件元素的显示叫入场，如果带动画就叫入场动画；组件元素的隐藏叫出场，如果有动画就叫出场动画。

7.3.1 过渡型入场出场

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 入场动画的开始状态样式 */
        .v-enter-from {
            opacity: 0;
        }
        /* 入场动画的结束状态样式 */
        .v-enter-to {
            opacity: 1;
        }
        /* 入场动画如何过渡 */
        .v-enter-active {
            transition: opacity 3s;
        }

        /* 出场动画的开始状态样式 */
        .v-leave-from {
            opacity: 1;
        }

        /* 场出动画的结束状态样式 */
        .v-leave-to {
            opacity: 0;
        }

        /* 出场动画如何过渡 */
        .v-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="change">改变</button><br>
        <!-- 使用transition标签将需要动画的组件包裹 -->
        <transition>
            <child v-if="isShow"></child>
        </transition>

    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isShow: false
                }
            },
            components: {
                child: {
                    template: `<div>我是子组件</div>`
                }
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                }
            }
        }).mount('#app')
    </script>
</body>

7.3.2 动画型入场出场

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 入场动画关键帧 */
        @keyframes enter {
            0% {
                transform: translateX(-100px)
            }
            100% {
                transform: translateX(0)
            }
        }

        /* 出场动画关键帧 */
        @keyframes leave {
            0% {
                transform: translateX(0)
            }
            100% {
                transform: translateX(-100px)
            }
        }

        .v-enter-active {
            animation: enter 3s;
        }

        .v-leave-active {
            animation: leave 3s;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="change">改变</button><br>
        <transition>
            <child v-if="isShow"></child>
        </transition>

    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isShow: false
                }
            },
            components: {
                child: {
                    template: `<div>我是子组件</div>`
                }
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                }
            }
        }).mount('#app')
    </script>
</body>

7.3.3 实现混合效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .v-enter-from {
            opacity: 0;
        }

        .v-enter-to {
            opacity: 1;
        }

        .v-leave-to {
            opacity: 0;
        }

        @keyframes enter {
            0% {
                transform: translateX(-100px)
            }

            100% {
                transform: translateX(0)
            }
        }

        @keyframes leave {
            0% {
                transform: translateX(0)
            }

            100% {
                transform: translateX(-100px)
            }
        }

        .v-enter-active {
            animation: enter 3s;
            transition: opacity 3s;
        }

        .v-leave-active {
            animation: leave 3s;
            transition: opacity 3s;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="change">改变</button><br>
        <transition>
            <child v-if="isShow"></child>
        </transition>

    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isShow: false
                }
            },
            components: {
                child: {
                    template: `<div>我是子组件</div>`
                }
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                }
            }
        }).mount('#app')
    </script>
</body>

7.3.4 列表动画

上面实例都是对单元素的入场与出场，但实际开发中很多时候都需要使用多元素（比如：列表）。那么Vue也封装了多元素的入场与出场。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes enter {
            0% {
                transform: translateX(-100px)
            }

            100% {
                transform: translateX(0)
            }
        }

        .v-enter-active {
            animation: enter 0.5s;
        }

        /* 多元素动画时，其他元素有动作时的动画 */
        .v-move {
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="add">添加</button><br>
        <ul>
            <transition-group>
                <li v-for="item in arr" :key="item">{{item}}</li>
            </transition-group>
        </ul>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    arr: []
                }
            },
            methods: {
                add() {
                    this.arr.unshift(this.arr.length + 1)
                }
            }
        }).mount('#app')
    </script>
</body>
posted @   一生万物万物归一  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
· Vue3的学习---2
· Vue3的学习---4
· Vue CLI 系列之（十五）过渡与动画
· ④ vue 中的动画
· Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示