<!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>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

     <!-- 入场 bounceIn    离场bounceOut -->

   </head>

   <body>

       <div id="app">

       <input type="button" value="toggle"  @click="flag=!flag">

      <!--  需求：点击按钮，让h3显示，再点击，让h3隐藏 -->

       <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">

         <h3 v-if="flag">这是一个H3</h3>

       </transition> -->

       <!-- 使用 :duration="毫秒值" 来统一设置入场和离场时候的动画时长 -->

       <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">

         <h3 v-if="flag" class="animated">这是一个H3</h3>

       </transition> -->

       <!-- 使用 :duration="{ enter:200,leave:400}" 来分别设置 入场的时长和离场的时长 -->

       <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter:200,leave:400}">

         <h3 v-if="flag" class="animated">这是一个H3</h3>

       </transition>

       </div>

       <script>

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           flag:false

         },

         methods:{}

           });

       </script>

   </body>

 </html>

第五章 动画 44：动画-使用第三方animate.css类库实现动画的更多相关文章

  1. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

  2. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  3. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  4. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  5. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  6. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

  7. 【动画消消乐 】HTML+CSS 吃豆豆动画 073

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  8. Ionic3学习笔记（五）动画之使用 animate.css

    本文为原创文章,转载请标明出处 目录 前言 animate.css 的使用 animate.scss 的使用 1. 前言 animate.css 是一款强大的.跨浏览器的预设CSS3动画库,内置了很多 ...

  9. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

随机推荐

  1. 修改node节点名称

    https://my.oschina.net/u/3390908/blog/1649764 .查看原来node [root@lab2 ~]# kubectl get no NAME STATUS RO ...

  2. 1004: [递归]母牛的故事（python)：（本地测试正确；但提交不对！！？？）求教

    时间限制: 1Sec 内存限制: 128MB 提交: 28438 解决: 8320 题目描述 有一头母牛,它每年年初生一头小母牛.每头小母牛从第四个年头开始,每年年初也生一头小母牛.请编程实现在第n年 ...

  3. office web apps安装部署,配置https,负载均衡（四）安装office web apps相关软件

    前提条件: 1.一台windows server 2008R2服务器,并且已经配置了域: 服务器连接域控制器的相关文档,请查看上一篇文章: office web apps安装部署,配置https,负载 ...

  4. javascrit-function中this的指向问题

    javascrit中this的指向 全局作用域或者普通函数中 this 指向全局对象 window. //直接打印 console.log(this) //window //function声明函数 ...

  5. 大觅网03Day

    实现轮播图接口 1.在开始工作之前请先准备好以下要用到的软件以及素材: MarkdownPad: POSTMAN: dm-common(install打包操作-保证本地构建), dm-base-pro ...

  6. 阿里云Zabbix安装实践过程

    1.配置阿里云zabbix yum源 [root@VM_0_8_centos ~]# rpm -ivh https://mirrors.aliyun.com/zabbix/zabbix/3.0/rhe ...

  7. 日期和时间（datetime模块）

    前言: 参考:https://blog.csdn.net/weixin_42232219/article/details/89838580 在 python 中,datetime 是对日期数据进行处理 ...

  8. 关于maven自动部署tomcat9 步骤

    maven 自动部署tomcat9 (远程方法) 1.首先要去配置用户,在tomcat的conf中有tomcat_users.xml,在其中有tomcat-user的配置 配置:<tommcat ...

  9. 通过设置访问密码查看Tomcat服务器运行状态

    安装tomcat 设置访问manager用户名,密码 vim /usr/local/tomcat9/conf/tomcat-users.xml # 设置访问manager用户名,密码 # 在倒数第二行 ...

  10. linux入门到高级

    目  录 1. Linux入门篇.................................................................................... ...