zoukankan      html  css  js  c++  java
  • vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果
    1.首先先引入第三方类animated.css
    2.将你所需要动画的标签用包裹起来
    3.在transition元素中添加enter-active-class/leave-active-class入场离场属性
    但是设置的值前面必须加上animated(当然也可以不在transition上设置animated,可以在你所要进行动画的标签上设置class属性为animated)
    4.也可以加入:duration来统一设置入场和离场时候的时长
    案例如下

    <!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>Document</title>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/animate.css">
    </head>
    <body>
    <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
    <h3 v-if="flag">这是一个H3</h3>
    </transition> -->
    <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration:"400">
    <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition>
    </div>
    <script>
    var vm=new Vue({
    el:'#app',
    data:{
    flag:false
    },
    methods:{

    }
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    Laravel 学习笔记:Command
    laravel command
    git和并分支
    mysql按日期分组统计的查询
    用GitLab的Merge Request做代码评审
    Git创建合并和删除分支
    生成器和生成器表达式
    闭包,迭代器
    Mysql 初始数据库
    初识函数
  • 原文地址:https://www.cnblogs.com/cssy/p/11605399.html
Copyright © 2011-2022 走看看