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. python自动化测试应用-第6篇（WEB测试）--Selenium元素篇

    篇6                            python自动化测试应用-Selenium基础篇 --lamecho 1.1概要 大家好!我是lamecho(辣么丑),上一篇我们搭建好p ...

  2. CF798 C. Mike and gcd problem

    /* CF798 C. Mike and gcd problem http://codeforces.com/contest/798/problem/C 数论 贪心 题意:如果一个数列的gcd值大于1 ...

  3. single number i && ii && iii

    Problem statement Elementary knowledge: There is a popular question when I seeked my job at Beijing: ...

  4. (详细)php实现留言板---会话控制-----------2017-05-08

    要实现留言功能,发送者和接受者必不可少,其次就是留言时间留言内容. 要实现的功能: 1.登录者只能查看自己和所有人的信息,并能够给好友留言 2.留言板页面,好友采取下拉列表,当留言信息为空时,显示提示 ...

  5. Python 与 C/C++ 交互的几种方式

    python作为一门脚本语言,其好处是语法简单,很多东西都已经封装好了,直接拿过来用就行,所以实现同样一个功能,用Python写要比用C/C++代码量会少得多.但是优点也必然也伴随着缺点(这是肯定的, ...

  6. python中的一些小知识

    在最近学习python中遇到的一些小问题汇总一下: 1.在windows7下安装python3.5版本时提示安装不了,缺少ServicePack1.  解决办法是,打开控制面板\系统和安全\Windo ...

  7. Docker - 手动迁移镜像

    在没有Docker Registry时,可以通过docker save和docker load命令完成镜像迁移的过程,先将镜像保存为压缩包,然后在其他位置再加载压缩包. 将镜像保存为压缩包文件 [ro ...

  8. 0基础搭建Hadoop大数据处理-集群安装

    经过一系列的前期环境准备,现在可以开始Hadoop的安装了,在这里去apache官网下载2.7.3的版本 http://www.apache.org/dyn/closer.cgi/hadoop/com ...

  9. hadoop配置文件的作用

    core-site.xml <property> //指定hdfs的主端口 namenode要放在哪台机器上 <name>fs.defaultFS</name> & ...

  10. Springboot数据访问，棒棒哒！

    Springboot对数据访问部分提供了非常强大的集成,支持mysql,oracle等传统数据库的同时,也支持Redis,MongoDB等非关系型数据库,极大的简化了DAO的代码,尤其是Spring ...