1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>动画</title>
  6.     <script type="text/javascript" src="vue.js"></script>
  7.     <link rel="stylesheet" type="text/css" href="animate.css">
  8.     <style type="text/css">
  9.         p {
  10.             width: 300px;
  11.             height: 300px;
  12.             background: red;
  13.             margin: 10px auto;
  14.         }
  15.     </style>
  16.     <script type="text/javascript">
  17.         window.onload = function(){
  18.             var app = new Vue({
  19.                 el:'#box',
  20.                 data:{
  21.                     show:false
  22.                 }
  23.             })
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id="box">
  29.         <!-- 控制数据的值切换显示隐藏 -->
  30.         <button @click="show=!show">transition</button>
  31.  
  32.         <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
  33.             <p v-show="show" class="animated"></p>
  34.         </transition> -->
  35.  
  36.         <!-- 第二种方法 -->
  37.         <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
  38.             <p v-show="show"></p>
  39.         </transition> -->
  40.  
  41.         <!-- 多元素运动 -->
  42.         <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
  43.             <p v-show="show" class="animated" :key="1"></p>
  44.             <p v-show="show" class="animated" :key="2"></p>
  45.         </transition-group>
  46.     </div>
  47. </body>
  48. </html>

vue过渡和animate.css结合使用的更多相关文章

  1. vue中使用animate.css

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

  2. vue 动画框架Animate.css @keyframes

    <script src="vue.js"></script> <link rel="stylesheet" href=" ...

  3. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

  4. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 在vue中使用animate.css

    animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...

  6. vue中使用animate.css实现动画

    参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...

  7. vue2.0和animate.css的结合使用

    animate.css是一款前端动画库,相似的有velocity-animate. 上述是一个完整的结构.其中重要的几个点用箭头表示出来.首先在transition组件内部,需要定义两个基本的clas ...

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

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

  9. vue 结合 animate.css

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

随机推荐

  1. winsshfs的快速入手

    之前在公司使用mac ,并且通过mac下的osfuse和sshfs连接,直接将虚拟机的文件目录同步到了本地,并且可以进行实时操作修改,对于写项目,确实是省了很大一部分上传的精力. 于是在自己的win下 ...

  2. 前端开发面试题总结之——JAVASCRIPT（一）

    ___________________________________________________________________________________ 相关知识点 数据类型.运算.对象 ...

  3. wpf中子窗口的几个问题

    今天研究了一下wpf中的窗口,写这篇文章来总结一下今天的收获.(转载请注明出处~) 总所周知,窗口是windows系统中十分重要的一个元素(从名字上就能体现出来),而一个应用程序总是包含很多窗口(主窗 ...

  4. java学习书籍推荐

    1. Java 语言基础 谈到Java 语言基础学习的书籍,大家肯定会推荐Bruce Eckel 的<Thinking in Java >.它是一本写的相当深刻的技术书籍,Java 语言基 ...

  5. 3553: [Shoi2014]三叉神经树（树链剖分）

    这道题特别恶心，首先我们可以发现更改的就是出现连续的一或二，那么就用线段树+树链剖分找到这个范围 想到是不难想，就是打起来恶心罢了= = CODE： #include<cstdio> #i ...

  6. 浅谈iOS程序员的成长和进阶

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  7. 导航原理实验系统软件——node-webkit初探

    最近,和同学接手了一个某军校<导航原理>课程的教学实验平台软件开发工作. 本项目在客户端主要用到的技术便是node-webkit,使用它能够以Web的方式开发桌面应用程序.下面,就以本项目 ...

  8. ajax跨域请求时，sessionId不一样，导致无法记住登陆状态

    遇到这样一个场景,就是前端的域是dev,请求接口时,接口的域是beta,即使在服务端设置了cookie存放的域,'COOKIE_DOMAIN'   =>  '.roboming.com',虽然c ...

  9. Asp.Net 常用工具类之加密——对称加密DES算法（2）

    又到周末,下午博客园看了两篇文章,关于老跳和老赵的程序员生涯,不禁感叹漫漫程序路,何去何从兮! 转眼毕业的第三个年头,去过苏州,跑过上海,从一开始的凌云壮志,去年背起行囊默默回到了长沙准备买房,也想有 ...

  10. C#基础——集合及特殊集合

    集合 集合的基本信息: Systerm.Collections命名空间包含接口和类,这些接口和类定义各种对象(如列表.队列.位数组.哈希表和字典)的集合. Systerm.Collections.Ge ...