VUE入门到实战--Vue中CSS动画

最新推荐文章于 2023-05-17 11:02:04 发布

taopoppy

最新推荐文章于 2023-05-17 11:02:04 发布

阅读量317

点赞数 1

分类专栏：进阶的Vue 文章标签： Vue中的CSS原理使用Animate.css库 Vue同时使用动画和过渡

本文链接：https://blog.csdn.net/weixin_37968345/article/details/83059182

版权

进阶的Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、动画原理

1、当一个元素被transition包裹之后，Vue会自动分析元素的CSS样式，并且构建一个动画的流程。

2、如下图，当动画即将被执行的这一瞬间：会往div上增加两个class，分别是fade-enter和fade-enter-active。

当动画第一帧结束进行第二帧的时候：Vue会去掉刚才的fade-enter那个class，然后添加fade-enter-to这个class。

当动画执行的最后的一瞬间：Vue会把fade-enter-active和fade-enter-to去除掉。

3、上面我们讲了假如一个元素从隐藏到显示的动画，现在我们讲一下从显示到隐藏，和上面的图差不多，但是class名字变了：

4、是这样，当动画即将被执行的这一瞬间：会往div上增加两个class，分别是fade-leave和fade-leave-active。

当动画第一帧结束进行第二帧的时候：Vue会去掉刚才的fade-leave那个class，然后添加fade-leave-to这个class。

当动画执行的最后的一瞬间：Vue会把fade-leave-active和fade-leave-to去除掉。

5、所以说fade-enter-active和fade-leave-active这两个class其实是贯穿于整个动画，所以在这里添加过渡动画或者监听的属性。而另外四个属性相对于来说就是在某个时间点做出的被监听的动画属性的改变。

6、所以Vue的动画就是在某个时间去往元素上添加动画相关的class来实现的。

<!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>animation</title>
    <script src="./vue.js"></script>
    <style>
        .fade-enter , .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active , .fade-leave-active {
            transition: opacity 2s;
        }
        .fade-enter-to {
            color: red;
        }
    </style>
</head>
<body>
    <div id="root">
        <transition name="fade">
        <!--1、给有动画的元素使用transition包裹，并取名fade,特别注意，如果不起名字，上面的CSS样式都要使用v-开头，不是fade-了-->
                <div v-if="show">hello world</div><!--这里还能使用v-show-->
        </transition>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleBtnClick: function() {
                    this.show = !this.show;
                }
            }
        })
    </script>
</body>
</html>

2、在Vue中使用Animate.css库

1、我们使用CSS3之中的动画来书写代码：

<!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>animation</title>
    <script src="./vue.js"></script>
    <style>
       @keyframes bounce-in {
           from {transform: scale(0);}
           50% {transform: scale(1.5);}
           to {transform: scale(1);}
       }
       .fade-enter-active {
           transform-origin: left center;
           animation: bounce-in 1s;
       }
       .fade-leave-active {
           transform-origin: left center;/*改变一下transfrom的坐标基准点，让动画正常*/
           animation: bounce-in 1s reverse; /*隐藏的时候我们反向执行动画*/
       }
    </style>
</head>
<body>
    <div id="root">
        <transition name="fade">
                <div v-show="show">hello world</div>
        </transition>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleBtnClick: function() {
                    this.show = !this.show;
                }
            }
        })
    </script>
</body>
</html>

2、那么我们有了transition这个标签后，我们一定要使用fade-enter-active或者fade-leave-active这样的选择器名称么？不是我们还有下面这样的一个选择器可以多处使用的的方法：选择器正常命名，在transition标签中去书写enter-active-class和leave-active-class等属性

<!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>animation</title>
    <script src="./vue.js"></script>
    <style>
       @keyframes bounce-in {
           from {transform: scale(0);}
           50% {transform: scale(1.5);}
           to {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添加enter-active-class和leave-active-class两个属性，并与CSS选择器绑定-->
        <transition  enter-active-class="active" leave-active-class="leave">
                <div v-show="show">hello world</div>
        </transition>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleBtnClick: function() {
                    this.show = !this.show;
                }
            }
        })
    </script>
</body>
</html>

3、有了上面这个transition标签上使用动画class与正常css样式绑定的方法，我们就能使用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>animation</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./animate.css"><!--1、引入Animate.css文件-->
</head>
<body>
    <div id="root">
        <!--2、绑定动画，必须写上animated-->
        <transition enter-active-class="animated swing" leave-active-class="animated shake">
                <div v-show="show">hello world</div>
        </transition>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleBtnClick: function() {
                    this.show = !this.show;
                }
            }
        })
    </script>
</body>
</html>

3、在Vue中同时使用CSS过渡和动画

3.1、appear的使用

1、我们希望页面在加载的时候，元素第一次出现的时候也能拥有动画效果，我们可以这样：

<!--1、在transition标签中使用appear表示第一次出现也需要动画效果-->
<!--2、自定义第一次出现的动画appear-active-class-->
<transition
    appear 
    appear-active-class="animated swing"
    enter-active-class="animated swing" 
    leave-active-class="animated shake"
>
    <div v-show="show">hello world</div>
</transition>

3.2、同时使用CSS动画和过度

1、同时使用动画和过渡，因为我们使用的Animate.css库中定义动画时长为1s，而我们自己定义的过渡时长可能不是1s，所以可以使用transition标签中的type属性去设置，如下所示

<!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>animation</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./animate.css">
    <style>
        /*1、过渡动画的时长为3s，动画时长为1s*/
        .fade-enter-active , .fade-leave-active {transition: opacity 3s;}
        .fade-enter , .fade-leave-to {opacity: 0;}
    </style>
</head>
<body>
    <div id="root">
        <!--2、使用type来表示以谁的动画时长为准（以过度动画为准）-->
        <transition
            type="transition"
            name="fade"
            appear 
            appear-active-class="animated swing fade-enter-active"
            enter-active-class="animated swing fade-enter-active" 
            leave-active-class="animated shake fade-leave-active"
        >
                <div v-show="show">hello world</div>
        </transition>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        var vm = new Vue({el: "#root",data: {show: true,},methods: {handleBtnClick: function() {this.show = !this.show;}}})
    </script>
</body>
</html>

2、使用transition标签中的：duration的属性去自定义。

<!--出场和入场都是10秒--> 
<transition
      :duration="10000"
      ...
 >

3、使用transition标签中的：duration属性去设置复杂的时长。

<!--给出场动画和入场动画分别设置不同的时长-->
<transition
    :duration="{enter:5000,leave:1000}"
    ...
>

taopoppy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE入门到实战--Vue中CSS动画

1、动画原理1、当一个元素被transition包裹之后，Vue会自动分析元素的CSS样式，并且构建一个动画的流程。2、如下图，当动画即将被执行的这一瞬间：会往div上增加两个class，分别是fade-enter和fade-enter-active。当动画第一帧结束进行第二帧的时候：Vue会去掉刚才的fade-enter那个class，然后添加...
复制链接

扫一扫