vue动画

　　　　在vue.js中有两种写动画的方法，第一种就是像js里一样，用原生代码来实现，第二种则是使用animate.css的动画类文件，这个动画类和bootstrap.css文件类似，直接调用类就可以了，话不多说，直接上代码。

一、vue.js原生动画

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <script type="text/javascript" src="js/vue.js" ></script>

         <style>

             .oDiv{

                 width: 200px;

                 height: 200px;

                 border: 3px dashed red;

                 background: coral;

             }

             .fade-transition{

                 transition: 2s all ease;

             }

             .fade-enter{

                 opacity: 0;

             }

             .fade-leave{

                 opacity: 0;

                 transform: translate(200px);

             }

         </style>

     </head>

     <body>

         <div id="box">

             <input type="button" value="button" @click="toggle()" />

             <div class="oDiv" v-show="Dist" transition="fade">{{Dist}}</div>

         </div>

     </body>

     <script type="text/javascript">

             new Vue({

                 el:'#box',

                 data:{

                     Dist:false

                 },

                 methods:{

                     toggle:function(){

                         this.Dist=!this.Dist;

                     }

                 }

             })

         </script>

 </html>

二、animate.css动画类

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

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

         <script type="text/javascript" src="js/vue.js" ></script>

         <style>

             #box{

                 width: 500px;

                 margin: 0 auto;

             }

             #oDiv{

                 width: 200px;

                 height: 200px;

                 border: 3px dashed red;

                 background: coral;

             }

         </style>

     </head>

     <body>

         <div id="box">

             <input type="button" value="button" @click="toggle()" />

             <!--class="animated"让运动物体准备运动，引用的animate里面的clss类， bouce是动画名称-->

             <div id="oDiv" v-show="Dist" class="animated" transition="bouce">{{Dist}}</div>

         </div>

     </body>

     <script type="text/javascript">

             new Vue({

                 el:'#box',

                 data:{

                     Dist:false

                 },

                 methods:{

                     toggle:function(){

                         this.Dist =!this.Dist;

                     }

                 },

                 transitions:{//可以接一个专门运作动画的参数数组

                     bouce:{//动画名称

                         enterClass:'zoomInLeft',

                         leaveClass:'zoomOutRight'

                     }

                 }

             })

         </script>

 </html>

　　具体的动画类，可以去看一下API。

animate.css官网地址：https://daneden.github.io/animate.css
animate.css Github下载地址：https://github.com/daneden/animate.css

vue动画的用法的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. vue动画及其原理

    1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2,  我们以两张 ...

  3. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  4. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  5. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  6. iOS block-base 动画简单用法＋关键帧动画设置线性变化速度的问题

    本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37  segmentfault-博客原文  http://segm ...

  7. Android属性动画-基本用法

    在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(frame-by-frame animation)和补间动画(twe ...

  8. vue动画实现方式

    vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  9. vue动画理解，进入、离开、列表过度和路由切换。

    vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...

随机推荐

  1. Swift、Objective-C 单例模式 (Singleton)

    Swift.Objective-C 单例模式 (Singleton) 本文的单例模式分为严格单例模式和不严格单例模式.单例模式要求一个类有一个实例,有公开接口可以访问这个实例.严格单例模式,要求一个类 ...

  2. sed命令详解-应用篇

    本篇从实用的角度讲解sed,关于sed的详细帮助文档,请参考前篇 http://www.cnblogs.com/the-capricornus/p/5279979.html 本篇用到的选项请参考前篇. ...

  3. 内核初始化优化宏(__init, __devinit)

    在内核里经常可以看到__init, __devinit这样的语句,这都是在init.h中定义的宏,gcc在编译时会将被修饰的内容放到这些宏所代表的section. 原文地址:http://blog.c ...

  4. 使用PhpIniDir加载php配置文件出错，不能解析。

    我也是在apache服务器上配置php,在加载了php的配置文件之后,就出问题了. PHPIniDir "H:/php54/"增加了类似这句话之后,服务器就启动不了了,或者.php ...

  5. 【算法系列学习】[kuangbin带你飞]专题十二 基础DP1 F - Piggy-Bank 【完全背包问题】

    https://vjudge.net/contest/68966#problem/F http://blog.csdn.net/libin56842/article/details/9048173 # ...

  6. Linux常用快捷按键

    Linux常用快捷按键 为了提高工作效率 1 一定用快捷键 这里简单的说下几个常用的快捷按键. Ctrl + l    清屏,相当于clear命令. Ctrl + z    挂起,程序放到后台,程序没 ...

  7. 【Java SE】利用Java的for循环加random制作小学试卷

    前期介绍:很多同学以为学习一门编程语言,一定要学到很高深的时候才可以做项目,其实不然,很多时候我们不需要学到面向对象的思想,就可以从事一些小项目的开发,来增加自己对开发的热情,比如现在我就可以利用Ja ...

  8. 使用Cmder的几个问题

    Cmder 全尺寸版本 [101022] 新版本的 Cmder Full 版本,安装包目录的 config 目录下,已经没有 aliases 文件,在 vendor 下的 init.bat 下也没有了 ...

  9. Mybatis中的like查询

    今天要做一个模糊查询 用的Mybatis 开始写的是: select id,bookName,author,publisher,donor,status,createDate,lastUpdate f ...

  10. nodejs6下使用koa2

    koa2里面使用ES7的语法,如async.await所以需要运行在node7.6之后:但在node7.6之前也可以利用babel是的koa2可以运行. 首先项目中安装babel,和babel的几个模 ...