vue动画的用法
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动画的用法的更多相关文章
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- vue动画及其原理
1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2, 我们以两张 ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题
本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37 segmentfault-博客原文 http://segm ...
- Android属性动画-基本用法
在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(frame-by-frame animation)和补间动画(twe ...
- vue动画实现方式
vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- vue动画理解,进入、离开、列表过度和路由切换。
vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...
随机推荐
- Vue 自定义图片懒加载指令v-lazyload
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- css常用的属性方法 上篇
自己是从java后台自学转前端的,所以平时一些简单的css+html就不写了,列出的都是新手常用的一些属性,会持续更新,大神勿喷,留给新手做个参考! 尤其是跟我一样自学前端的. 背景关联 ba ...
- 【代码学习】GD库中添加图片水印
函数 getimagesize() bool imagecopymerge( resource dst_im, resource src_im, int dst_x, int dst_y, int s ...
- 【算法系列学习】codeforces C. Mike and gcd problem
C. Mike and gcd problem http://www.cnblogs.com/BBBob/p/6746721.html #include<iostream> #includ ...
- 优化单页面开发环境:webpack与react的运行时打包与热更新
前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...
- 开源分布式任务调度平台Cuckoo-Schedule
1 概述 1.1 平台概述 Cuckoo-Schedule是基于Quartz-Schedule的轻量级任务调度框架,具有易学习.易上手.开发高效稳定的特点.Demo地址:ht ...
- Thinkphp模板简单入门
Thinkphp模板概述: ThinkPHP内置了一个基于XML的性能卓越的模板引擎,这是一个专门为ThinkPHP服务的内置模板引擎,使用了XML标签库技术的编译型模板引擎,支持两种类型的模板标签, ...
- R语言分析(一)-----基本语法
一, R语言所处理的工作层: 解释一下: 最下面的一层为数据源,往上是数据仓库层,往上是数据探索层,包括统计分析,统计查询,还有就是报告 再往上的三层,分别是数据挖掘,数据展现和数据决策. 由上图 ...
- TreeSet源码分析
第1部分 TreeSet介绍 TreeSet 是一个有序的集合,它的作用是提供有序的Set集合.它继承于AbstractSet抽象类,实现了NavigableSet<E>, Cloneab ...
- 点击文字选中checkbox
<html> <head> <title>test</title> <meta http-equiv="content-Type&quo ...