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