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. Java多线程的几个常用关键字

    一.同步(synchronized)和异步(asynchronized) 1.同步(synchronized)简单说可以理解为共享的意思,如果资源不是共享的,就没必要进行同步.设置共享资源为同步的话, ...

  2. 利用Apache POI 实现简单的Excel表格导出

    1.利用POI API实现简单的Excel表格导出 首先假设一个学生实体类: package com.sun.poi.domain; import java.io.Serializable; impo ...

  3. Cocos2d-x 3.2 环境搭建

    参考文章地址: 1.Cocos2d-x官方安装说明文档:http://cn.cocos2d-x.org/tutorial/show?id=781 2.CSDN博客:http://blog.csdn.n ...

  4. 博弈论(Game Theory) - 01 - 前传之占优战略均衡

    博弈论(Game Theory) - 01 - 前传之占优战略均衡 开始 我们现在准备攀爬博弈论的几座高峰. 我们先看看在纳什均衡产生之前,博弈论的发展情况. 我们的第一座高峰是占优战略均衡. 囚徒困 ...

  5. Firefox实用插件记录

    之前总结过一个软件推荐的小文,用来记录一直以来在软件开发过程中遇到的各种实用的软件.后来发现里面越来越多的记录了Firefox的插件,所以今天决定单独抽出一个页面来记录Firefox的插件.因为平时大 ...

  6. python课程第一天笔记-la

    http://www.cnblogs.com/onda/   ----------------------20170423 一:Cpython  pypy 区别 等;Cpython 是一行一行解释, ...

  7. [刷题]算法竞赛入门经典 3-7/UVa1368 3-8/UVa202 3-9/UVa10340

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 都是<算法竞赛入门经典(第二版)>的题目,标题上没写(第二版) 题目:算法竞赛入门经典 3-7/UVa13 ...

  8. NancyFx 2.0的开源框架的使用-Stateless

    同样和前面一样新建一个空的Web项目,都在根目录添加Module,Models,Views文件夹 添加Nuget包 在Models文件夹里面添加UserModel类 public string Use ...

  9. ScheduledFuture和RunnableScheduledFuture详解

      ScheduledFuture java.util.concurrent 接口 ScheduledFuture<V> 类型参数:     V - 此 Future 返回的结果类型. 所 ...

  10. ER模型的学习

    (计应154兰家才)在建立表后开始了学习的第一步,了解数据库的基本知识,就以建立bbs论坛为标准学习er模型,首先建立了4个表分别是BBSReply,BBSSection,BBSTopic,BBSUs ...