<!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. vue 如何读取编译携带的参数

    vue 环境有很多套,我们需要根据不同环境设置不同的一些参数,如何不装任何依赖的情况下获取参数 下面是我制作官网,需要根据开发还是生产环境配置不同CDN,用vue-cli2+webpack,配置是再: ...

  2. Struts 2中的constant详解【转载】

    通过对这些属性的配置,可以改变Struts 2 框架的一些默认行为,这些配置可以在struts.xml文件中完成,也可以在struts.properties文件中完成. struts.xml 1.&l ...

  3. Vue.js（五）

    前后端交互概述与URL地址格式 JS中常见的异步调用: 定时任务 ajax 事件函数 接口调用方式: 原生ajax 基于jQuery的ajax fetch axios url 地址格式: 传统的url ...

  4. 【架构】Linux的架构(architecture)

    最内层是硬件,最外层是用户常用的应用,比如说firefox浏览器,evolution查看邮件,一个计算流体模型等等.硬件是物质基础,而应用提供服务.但在两者之间,还要经过一番周折. 还记得Linux启 ...

  5. 用 GetEnvironmentVariable 获取常用系统环境变量

    以前曾用 GetWindowsDirectory.GetSystemDirectory.GetTempPath 等函数获取系统常用文件夹; 也用过 SHGetSpecialFolderLocation ...

  6. BZOJ 4032: [HEOI2015]最短不公共子串(后缀自动机+记忆化搜索)

    传送门 解题思路 首先需要预处理两个串\(nxt(i)(j)\)表示i位置之后最近的\(j\). 第一问直接对\(b\)建后缀自动机,枚举\(a\)的起点暴力匹配. 第二问枚举\(a\)的起点,\(b ...

  7. memset函数及原补反码关系

    memset函数及原补反码关系 计算机存储的是补码 几组常用的memset函数初始化值 10000000 128 10000000 10000000 10000000 10000000 -213906 ...

  8. Python | 安装和配置智能提示插件Anaconda （转）

    作为Python开发环境的Sublime Text 3,有了Anaconda就会如虎添翼.Anaconda是目前最流行也是最有威力的Python代码提示插件. 工具/原料   Sublime Text ...

  9. 个人笔记 - MATLAB

    1.教程 2.基本知识 2.1 帮助文档设置成中文:链接1 2.2 多行注释: 链接1 2.3 MATLAB基本数据类型: 链接1  链接2 2.4 matlab中的 ndims(a).length( ...

  10. (18)C++ string和标准模板库

    一.stringl类 1.string构造函数 string a1("abc");//初始化字符串 cout<<a1<<endl;//abc , '#'); ...