Vue 中的动画特效

Posted 2021-02-06 wjw1014

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 中的动画特效相关的知识，希望对你有一定的参考价值。

Vue 中的动画特效

CSS 实现标签显隐

<!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>Vue中CSS动画原理</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <div v-if="show"> hello world </div>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>

　　技术分享图片

transition 过渡动画

如果要在vue中实现过渡动画，需要使用 transition 标签，名字可以随便取。

显示动画原理

　　技术分享图片

代码案例 - 3s完成显示

<!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>Vue中CSS动画原理</title>
    <script src="./vue.js"></script>
    <style>
        .fade-enter {
            opacity: 0;
        }

        .fade-enter-active {
            transition: opacity 3s;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 如果要实现过渡动画，需要使用 transition 标签，名字可以随便取,需要与css样式对应 -->
        <transition name="fade">
            <div v-if="show"> hello world </div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>

技术分享图片　　

隐藏动画原理

　　技术分享图片

案例代码 - 隐藏

<!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>Vue中CSS动画原理</title>
    <script src="./vue.js"></script>
    <style>
        .fade-enter {
            opacity: 0;
        }

        .fade-enter-active {
            transition: opacity 3s;
        }
        .fade-leave-to{
            opacity: 0;
        }
        .fade-leave-active{
            transition: opacity 3s;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 如果要实现过渡动画，需要使用 transition 标签，名字可以随便取,需要与css样式对应 -->
        <transition name="fade">
            <div v-if="show"> hello world </div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>

　　技术分享图片　　

代码优化

<!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>Vue中CSS动画原理</title>
    <script src="./vue.js"></script>
    <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 如果要实现过渡动画，需要使用 transition 标签，名字可以随便取,需要与css样式对应 -->
        <transition name="fade">
            <div v-if="show"> hello world </div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>

View Code

在Vue中使用Animate.css库

学前-代码案例

<!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>在vue中使用Animate.css库</title>
    <script src="./vue.js"></script>
    <style>
        @keyframes bounce-in{
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }

        .fade-enter-active{
            transform-origin: left center;
            animation: bounce-in 1s;
        }
        .fade-leave-active {
            transform-origin: left center;
            /* 动画反向运行 */
            animation: bounce-in 1s reverse;  
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 如果要实现过渡动画，需要使用 transition 标签，名字可以随便取,需要与css样式对应 -->
        <transition name="fade">
            <div v-if="show"> hello world </div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>

技术分享图片在显隐过程中有放大缩小效果。

自定义动画名称

<!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>在vue中使用Animate.css库</title>
    <script src="./vue.js"></script>
    <style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }

        /* 自定义动画效果名称 */
        .active {
            transform-origin: left center;
            animation: bounce-in 1s;
        }

        .leave {
            transform-origin: left center;
            /* 动画反向运行 */
            animation: bounce-in 1s reverse;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 如果要实现过渡动画，需要使用 transition 标签，名字可以随便取,需要与css样式对应 -->
        <!-- 自定义动画名称需要声明 -->
        <transition name="fade" enter-active-class="active" leave-active-class="leave">
            <div v-if="show"> hello world </div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>

View Code

Animate.css 官网

https://daneden.github.io/animate.css/

　　技术分享图片

代码案例

<!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>在vue中使用Animate.css库</title>
    <script src="./vue.js"></script>
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./animate.css">
</head>

<body>
    <div id="root">
        <!-- 如果要实现过渡动画，需要使用 transition 标签，名字可以随便取,需要与css样式对应 -->
        <!-- 自定义动画名称需要声明 -->
        <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
            <div v-if="show"> hello world </div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>

技术分享图片进入退出都会添加动画效果！

animate 使用注意事项

要使用自定义形式使用 animate.css。
class类里面必须包含一个 animated 具体的类，根据需求不同，把动画效果写在后面。

以上是关于Vue 中的动画特效的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS动画

Vue 中的动画特效

VSCode自定义代码片段7——CSS动画

新导航架构中的圆形显示动画

片段中的某些视图未使用过渡动画