<!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. 力扣——single number （只出现一次的数字） python实现

    题目描述: 中文: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 英 ...

  2. Flask-sqlalchemy-表关系

        表关系   表之间的关系存在三种:   一对一.一对多.多对多.   而SQLAlchemy中的ORM也可以模拟这三种关系.因为一对一其实在SQLAlchemy中底层是通过一对多的方式模拟的, ...

  3. Solr添加索引

    发送请求: http://localhost:8080/solr/update/?stream.body= <delete><id>id值</id></del ...

  4. python中map的排序以及取出map中取最大最小值

    map排序: 1.按key排序: items=dict.items() items.sort() sorted(dict.items(),key=lambda x:x[0],reverse=False ...

  5. python3.x 匿名函数lambda_扩展sort

    #匿名函数lambda 参数: 表达式关键字 lambda 说明它是一个匿名函数,冒号 : 前面的变量是该匿名函数的参数,冒号后面是函数的返回值,注意这里不需使用 return 关键字. ambda只 ...

  6. 深度 | 带领国产数据库走向世界，POLARDB底层逻辑是什么？

    POLARDB 是阿里云自主研发的下一代云原生分布式数据库,100%兼容MySQL.PostgreSQL等开源数据库,高度兼容Oracle语法,使用RDS服务的客户不需要修改应用代码,可以一键迁移到P ...

  7. Cisco基础(六)：配置目前网络环境、项目阶段练习

    一.配置目前网络环境 目标: 一家新创建的IT公司,公司位于北京有80多台服务器 目前网络环境使用技术,通过端口映射技术将web服务器发布给Internet: 三层交换:汇聚接入层交换机 默认路由:实 ...

  8. 大碗宽面Alpha第九周会议总结

    软件工程每周博客: 本周二我们进行了小组会议,对正在做的评课网站——海大优选进行了整体分析和明确分工.首先我们对整体网页进行了需求分析和框架分析,然后进行了分工,前端同学两人,后端同学两人,文档同学一 ...

  9. BZOJ 3531: [Sdoi2014]旅行(树链剖分+线段树)

    传送门 解题思路 以每个颜色为根开一棵权值线段树,下标就是\(dfs\)序,其余都是基本操作,要动态开点. 代码 #include<iostream> #include<cstdio ...

  10. 深入研究CSS

    通常我们在学习CSS的时候,感觉很容易掌握,却常常在实际应用中碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Stacking Context等诸多高级特性 ...