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. Javascript一道面试题

    实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 function add () ...

  2. Less与Sass

    less 1.变量    声明变量:@变量名:变量值 使用变量:@变量名 >>>Less中变量的类型 ①数字类:1 100px ②字符串:无引号字符串[red] 有引号字符串[&qu ...

  3. 【lucene系列学习】排序

    用lucene3实现搜索多字段并排序功能(设置权重)    

  4. 【2017-05-02】winform弹出警告框是否进行增删改操作、记事本制作、对话框控件和输出输入流

    一.winform弹出警告框是否进行增删改操作 第一个参数是弹出窗体显示的内容,第二个参数是标题,第三个参数是该弹窗包含确定和取消按钮. 返回的是一个枚举类接收一下. 再进行判断,如果点的是确定按钮, ...

  5. Bootstrap之折叠（Collapse）插件

    学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...

  6. C++ 元编程 —— 让编译器帮你写程序

    目录 1 C++ 中的元编程 1.1 什么是元编程 1.2 元编程在 C++ 中的位置 1.3 C++ 元编程的历史 2 元编程的语言支持 2.1 C++ 中的模板类型 2.2 C++ 中的模板参数 ...

  7. css控制table的td宽度

    今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...

  8. python3.5 安装lxml

    通过xpath 爬虫时,使用到了lxml,通过pip 安装lxml 报错"building 'lxml.etree' extension  building 'lxml.etree' ext ...

  9. POJ1182食物链（并查集）

    Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到 ...

  10. 怎么在vue中使用less

    最近使用vue2.0重构项目, 使用vue-cli脚手架构建, 采用webpack模板, 要在项目中使用less进行样式的编写 首先, 打开终端, 在当前项目目录下安装less npm install ...