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. [ext4]磁盘布局 - inode bitmap & table

    在[磁盘布局 group部分]已经介绍过ext4的整体布局,其中存在两个与inode有关的名称:inode bitmap和inode table. Inode bitmap,用于表示inode tab ...

  2. 纯HTML课表

    table标签构造课表 table标签常用于制作表格以及简单布局,于是我就玩了下table标签,用table标签也能构造出很漂亮的页面呢,虽然在博客页面加入与实际打开页面稍微有点出入,但还是可以接受的 ...

  3. ETL开发面试问题加吐槽加职业发展建议

    写在前面: 作为甲方,对于乙方派来的开发人员,我是会自己面一下.总体来说遇到的水平不一,于是经过这三年多的面(cui)试(can),总结了一套自己的面试套路,中间也遇到过很多想吐槽的东西,于是大概记录 ...

  4. jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索

    1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...

  5. hadoop集群中删除原有jdk设置

    普通用户: sudo rpm -e --nodeps java-1.6.0-openjdk-1.6.0.0-1.50.1.11.5.el6_3.x86_64 tzdata-java-2012j-1.e ...

  6. linux防火墙基本操作

    1.查看防火墙运行状态 # firewall-cmd --state 或者 # systemctl status firewalld.service .关闭防火墙 # systemctl stop f ...

  7. Redis学习-复制

    Redis支持简单且易用的主从复制(master-slave replication)功能, 该功能可以让从服务器(slave server)成为主服务器(master server)的精确复制品.以 ...

  8. Java生产1-100的随机数

    直接调用Math里面的random即可,简单方便int i = (int)(Math.random()*100+1);

  9. 在linux服务器上发布web应用的完整过程

    首先你要有一个完整的web应用的小Demo,一个简单的demo就可以了,但是要涉及到数据库,笔者这里简单的模拟一个登陆的过程. 在本地测试,访问项目: 键入账号密码,点击登陆: 就是这么个简单的动作, ...

  10. 如何获取url中文件的后缀名

    这是今天给学生解答问题的时候学生问的一个问题,我就在班级里给学生整体讲了一下,现在做一下分享,大家一起学习!! $url = 'http://www.sina.com.cn/abc/de/fg.php ...