Vue.animate.css组件库的使用的详细解析

最新推荐文章于 2024-05-07 14:50:28 发布

西门吃雪……

最新推荐文章于 2024-05-07 14:50:28 发布

阅读量312

点赞数

分类专栏： vue 学习记录

本文链接：https://blog.csdn.net/xiaonanhaijing/article/details/109581494

版权

vue 学习记录专栏收录该内容

19 篇文章 0 订阅

订阅专栏

首先我回顾一下上次使用的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中Css动画原理</title>
    <script src='./vue.js'></script>
    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: opacity 3s;
            ;
        }
    </style>
</head>

<body>

    <div id="root">
        <transition>
            <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">
    <title>Vue中的使用animate.css库</title>
    <script src='./vue.js'></script>
    <!-- <link rel="stylesheet" type="text/css" href="./animate.css"> -->
    <style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        /* 接下来我们就可以使用这个动画了 */
        /* 当div show标签显示的过程中一直存在 */
        
        .fade-enter-active {
            transform-origin: left center;
            animation: bounce-in 3s;
        }
        /* 当div show标签不显示的过程中一直存在 */
        /* 当离开的时候  我希望这个动画进行反向执行 */
        /* reverse */
        
        .fade-leave-active {
            transform-origin: left center;
            animation: bounce-in 1s reverse;
        }
    </style>
</head>

<body>

    <div id="root">
        <transition name="fade">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">toggle</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">
    <title>Vue中的使用animate.css库</title>
    <script src='./vue.js'></script>
    <!-- <link rel="stylesheet" type="text/css" href="./animate.css"> -->
    <style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        /* 接下来我们就可以使用这个动画了 */
        /* 当div show标签显示的过程中一直存在 */
        
        .active {
            transform-origin: left center;
            animation: bounce-in 3s;
        }
        /* 当div show标签不显示的过程中一直存在 */
        /* 当离开的时候  我希望这个动画进行反向执行 */
        /* reverse */
        
        .leave {
            transform-origin: left center;
            animation: bounce-in 1s reverse;
        }
    </style>
</head>

<body>

    <div id="root">
        <transition name="fade" enter-active-class="active" leave-active-class="leave">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">toggle</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">
    <title>Vue中的使用animate.css库</title>
    <script src='./vue.js'></script>
    <link rel="stylesheet" type="text/css" href="./animate.css">
</head>

<body>

    <div id="root">
        <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            },
        })
    </script>

</body>

</html>

西门吃雪……

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.animate.css组件库的使用的详细解析

首先我回顾一下上次使用的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue中Css动画原理</title> <script src='./vue.js'></script> <style> .v-enter, .v-leave-to {
复制链接

扫一扫