vue学习（十八） animate.css使用

最新推荐文章于 2022-05-10 21:34:39 发布

dream21st

最新推荐文章于 2022-05-10 21:34:39 发布

阅读量158

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/qq_36305027/article/details/83778933

版权

vue学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1，下载animate.css

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

2,代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="animate.css"/>
    <style>
        @keyframes bunch-in {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }
       .fade-enter-active{
           animation: bunch-in 1s;
       }
        .fade-leave-active{
            animation: bunch-in 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- css5实现过渡效果-->
        <!--<transition name="fade">
            <div v-if="show">hello  world</div>
        </transition>
        <hr/>-->
        <transition enter-active-class="animated bounce" leave-active-class="animated zoomIn">
            <div v-if="show">hello  world</div>
        </transition>

        <button @click="handleClick">按钮</button>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                show:false
            },
            methods:{
                handleClick:function () {
                    this.show=!this.show
                }
            }
        })
    </script>
</body>
</html>

3，需要使用enter-active-class和leave-active-class来定义样式，并且第一个是animated 后面一个参数根据自己需要从animate.css中来选择