<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue中的动画</title>

         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

     </head>

     <body>

         <div id="app">

             <transition

                 name="fade"

                 enter-active-class="animated swing"

                 leave-active-class="animated shake">

                 <div v-if="show">hello world</div>

             </transition>

             <button @click="handleBtnClick">change</button>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

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

         <script type="text/javascript">

             var app = new Vue({

                 el: '#app',

                 data:　{

                     show: true

                 },

                 methods: {

                     handleBtnClick: function() {

                         this.show = !this.show;

                     }

                 }

             })

         </script>

     </body>

 </html>

引入animate.css文件

在tranisition标签里面添加enter-active-class，leave-active-class，这里面一定要添加animated这个类

vue 使用Animate.css库的更多相关文章

  1. vue使用animate.css库

    //引入库 <link rel="stylesheet" type="text/css" href="animate.css"> ...

  2. vue 结合 animate.css

    这里说的是vue2.0和animate.css的结合使用.其实用过就知道用法是比较简单的.但是就是刚开始使用的时候,难免有的会遇到各种问题.简单的说说我所用过并且遇过的坑. 首先是transition ...

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

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

  4. vue与animate.css的结合使用

    在vue项目中,由于页面需要动画效果,使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库. ...

  5. 在vue.js 中使用animate.css库

    main.js文件引入后,在vue文件里直接添加class   animated bounceInUp

  6. vue中使用animate.css

    一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...

  7. 全面解析vue-cli生成的项目中使用其他库（js库、css库）

    前言:最近有小伙伴问我,是不是用vue脚手架生成的项目就不能jquery了呢?显然,答案是否定的,必须能用.但是个人建议最好不要用了,用人家vue提供的不好嘛. 一.用vue-cli生成项目 1. v ...

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

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

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 2019CCPC网络赛 HDU6705 - path K短路

    题意:给出n个点m条边的有向图,问图上第K短路的长度是多少(这里的路可以经过任何重复点重复边). 解法:解法参考https://blog.csdn.net/Ratina/article/details ...

  2. java web项目获取项目路径

    注意:有时获取到的项目路径后再+“自定义路径后” 路径不可用,这时要看下项目里自定义路径是不是空文件夹,如果是空文件夹则调试和运行时文件夹不会编译到部署文件里. 1.方法一 调试时只能获取eclips ...

  3. Windows下JDK安装步骤 + eclipse集成配置

    一.JDK环境配置 1.解压到java目录下 2.路径和上面路径一致 3.配置path路径 4.查看版本 二.Eclipse配置 1.编译版本 2.运行环境 3.默认字集 4.字体大小

  4. shell 逐行比较两个文件的内容是否一样（行数相同）

    file1="1.txt" file2="2.txt" lines=`cat $file1 | wc -l` ;i<=$lines;i++)) do li ...

  5. SCP-bzoj-1058

    项目编号:bzoj-1058 项目等级:Safe 项目描述: 戳这里 特殊收容措施: STL好题.维护两个set,一个存储数列里相邻元素差,另一个存储整个数列. 对于MIN_SORT_GAP操作,维护 ...

  6. 2019牛客多校第四场D-triples I 贪心

    D-triples 题意 给你一个\(n\),问至少有几个数或运算起来可以等于\(n\),并且输出数量和这个几个数.题目说明给的\(n\)一定符合条件(不会输出\(n= 1\) 之类不存在情况). 思 ...

  7. delphi 读写记录类型文件Record

    type personInfo=Record //定义Record Name:String[10]; Age:integer; end; //写记录包括新键与添加记录 procedure WriteR ...

  8. 概念介绍:IaaS、PaaS、SaaS

    云计算分几层的,分别是Infrastructure(基础设施)-as-a-Service,Platform(平台)-as-a-Service,Sofware(软件)-as -a -Service.基础 ...

  9. 常用跨域方法总结（2）——CORS

    常用跨域方法总结(2)--CORS 上篇文章介绍了几种常用的跨域方法:常用跨域方法总结,本片为上一篇的补充,对比较重要的Cross Origin Resource Sharing详细介绍. CORS ...

  10. Android程序中欢迎界面

    额,在做项目中,肯定首先要用到欢迎界面,下面是我在做项目中用的最简单的一个欢迎界面,即打开程序时,先是显示一张图片,然后等一段时间后图片消失,进入登录界面.直接上代码,有注释也不用解释了: 首先是We ...