vue2.0动画
相对于vue1.0来说，vue2.0的动画变化还是挺大的，
在1.0中，直接在元素中加 transition ，后面跟上名字。
而在vue2.0中，需要把设置动画的元素、路由放在<transition name="fade"></transition>中，name就是动画名称。
在1.0时，css需要设置（动画名称以fade为例）.fade-transition .fade-enter .fade-leave
在2.0时，css设置大改，.fade-enter{} 元素初始状态 .fade-enter-active{} 元素最终状态 .fade-leave-active{} 元素离开的最终状态
在2.0中，依然可以与animate.css结合起来一起写动画，具体用法请看第三块代码
在2.0中，关于动画还为我们提供了一些事件，在下面第四段代码块
vue1.0动画源码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>博客园</title>
6 <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/1.0.28/vue.min.js" ></script>
7 <style>
8 .oDiv{
9 width: 200px;
10 height: 200px;
11 border: 3px dashed red;
12 background: coral;
13 }
14 .fade-transition{
15 transition: 2s all ease;
16 }
17 .fade-enter{
18 opacity: 0;
19 }
20 .fade-leave{
21 opacity: 0;
22 transform: translate(200px);
23 }
24 </style>
25 </head>
26 <body>
27 <div id="box">
28 <input type="button" value="button" @click="toggle()" />
29 <div class="oDiv" v-show="Dist" transition="fade">{{Dist}}</div>
30 </div>
31 </body>
32 <script type="text/javascript">
33 new Vue({
34 el:'#box',
35 data:{
36 Dist:false
37 },
38 methods:{
39 toggle:function(){
40 this.Dist=!this.Dist;
41 }
42 }
43 })
44 </script>
45 </html>
vue2.0动画源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>博客园</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js" ></script>
<style>
p{
width: 100%;
height: 300px;
background-color: #000;
color:#ddd;
overflow:hidden;
}
.donghua-enter-active{
transition: 1s all ease;
}
.donghua-leave-active{
transition: 1s all ease;
width: 100%;
height: 0px;
}
.donghua-enter{
width: 100%;
height: 0px;
}
</style>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:true
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition name="donghua">
<p v-show="show">AAAA</p>
</transition>
</div>
</body>
</html>
vue2.0配合 animate.css
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>配合animate.css做动画</title>
6 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"/>
7 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js" ></script>
8 <style>
9 p{
10 width: 300px;
11 height: 300px;
12 background-color: yellow;
13 margin: 0 auto;
14 }
15 </style>
16 <script type="text/javascript">
17 window.onload=function(){
18 new Vue({
19 el:'#box',
20 data:{
21 show:false
22 }
23 })
24 }
25 </script>
26 </head>
27 <body>
28 <div id="box">
29 <input type="button" value="点击显示和隐藏" @click="show=!show" />
30 <transition enter-active-class="zoomOutDown" leave-active-class="zoomOutUp">
31 <p v-show="show" class="animated"></p>
32 </transition>
33 </div>
34 </body>
35 </html>
vue2.0中，内置的动画事件
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>动画事件</title>
6 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js" ></script>
7 <style>
8 p{
9 width: 300px;
10 height: 300px;
11 background-color: yellow;
12 }
13 .donghua-enter-active,.donghua-leave-active{
14 transition: 5s all ease;
15 }
16 .donghua-enter-active{
17 opacity: 1;
18 width: 300px;
19 height: 300px;
20 }
21 .donghua-leave-active{
22 opacity: 0;
23 widows: 100px;
24 height: 100px;
25 }
26 .donghua-enter,.donghua-leave{
27 opacity: 0;
28 width: 100px;
29 height: 100px;
30 }
31 </style>
32 <script>
33 window.onload=function(){
34 new Vue({
35 el:'#box',
36 data:{
37 show:false
38 },
39 methods:{
40 beforeEnter(){
41 console.log("<!-- 进入动画开始之前 -->");
42 },
43 Enter(){
44 console.log("<!-- 正在进入动画-->");
45 },
46 afterEnter(el){
47 console.log("<!-- 动画结束 -->");
48 },
49 beforeLeave(el){
50 console.log("<!-- 离开动画开始之前 -->");
51 el.style.background='blue'; //改变颜色
52 el.innerHTML="123";
53 },
54 Leave(){
55 console.log("<!-- 正在离开动画-->");
56 },
57 afterLeave(){
58 console.log("<!-- 离开动画结束 -->");
59 },
60 }
61 });
62 };
63 </script>
64 </head>
65 <body>
66 <div id="box">
67 <input type="button" value="点击显示隐藏" @click="show=!show">
68 <transition name="donghua"
69 @before-enter="beforeEnter"
70 @enter="Enter"
71 @after-enter="afterEnter"
72 @before-leave="beforeLeave"
73 @leave="Leave"
74 @after-leave="afterLeave"
75 >
76 <p v-show="show"></p>
77 </transition>
78 </div>
79 </body>
80 </html>
81
82 </html>
vue2.0动画的更多相关文章
- vue2.0 动画
//先来一个简单的入场 <template> <div id="box"> <input type="button" value= ...
- vue2.0学习笔记之路由（二）路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0中动画
#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- vue DatePicker vue2.0的日期插件
一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的 ...
- 项目vue2.0仿外卖APP（五）
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- 饿了么基于Vue2.0的通用组件开发之路（分享会记录）
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
随机推荐
- 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1
第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...
- python 网络编程(网络基础之网络协议篇）
前言 C/S B/S 架构 client<----->server browser<--->server 学习socket编程就是要编写一个客户端软件和服务端软件,然后实现服 ...
- eclipse + tomcat 开发环境配置
一. 下载tomcat和Eclipse 下载tomcat 下载地址:http://tomcat.apache.org/download-70.cgi 下载后解压如下图 下载eclipse 下载地址:h ...
- TextBox禁用与启用的方法
$('#text1').textbox('enable');// 启用 $('#text1').textbox('disable');// 禁用 注:以上方法也适用于datebox等等
- CodeForces 689C【二分】
转自: http://blog.csdn.net/qq_26071477/article/details/51892995 #include<stdio.h> typedef long l ...
- 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)
一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...
- [Xcode 实际操作]一、博主领进门-(7)使用不同类型的iOS模拟器
目录:[Swift]Xcode实际操作 本文将演示使用不同类型的iOS模拟器. 点击[运行]按钮,打开模拟器,并预览当前的项目. 当向苹果商店提交应用时,也需要同时提交应用的截图. 对当前的应用的界面 ...
- Java常见设计模式学习（非原创）
文章大纲 一.策略模式二.观察者模式三.工厂模式四.单例模式五.其他模式六.设计模式总结七.参考文章 一.策略模式 现在假设我们有个"鸭子项目",首先我们用OOP(面向对象)的 ...
- 蓝牙硬件交互数据传输Demo
#import "ViewController.h" #import <CoreBluetooth/CoreBluetooth.h> @interface ViewCo ...
- Flask (三) 数据迁移
数据迁移 安装 pip install flask-migrate 初始化 使用app和db进行migrate对象初始化 from flask_migrate import Migrate mig ...