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 的一些心得. 官网 ...
随机推荐
- Eclipse中建立自己的类库,给不同的工程使用
win7 进入服务 开始 运行 services.msc 在多个工程当中,可能使用到相同的jar包,这时,如果我们建立一个自己的类库,该类库中存放着所有工程均需要的jar包,就可以免去重复导入的麻烦. ...
- Lightoj1003【判环操作】
题意: 对于n个给出字符串a,b,理解成a在b之前办好这个事情,要求n个给出两个串,a都要在b之前完成: 题意: 所以一旦出现环就不行了: 以前在写最短路的时候,spfa就有一个判环,后来写着写着写到 ...
- 地理位置(navigation.geolocation)与本地存储(seessionStorage、localStorage)
一.地理位置( geolocation ): navigator.geolocation对象: 1.单次请求: //navigator.geolocation.getCurrentPosition( ...
- TRANSFORM_TEX是做什么的
简单来说,TRANSFORM_TEX主要作用是拿顶点的uv去和材质球的tiling和offset作运算,确保材质球里的缩放和偏移设置是正确的. (v.texcoord就是顶点的uv) 而_MainTe ...
- IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie技术原理
Cookie使用HTTPHeader传递数据.Cookie机制定义了两种报头,Set-Cookie报头和Cookie报头.Set-Cookie报头包含于Web服务器的响应头(ResponseHeade ...
- 第二十一篇 .NET高级技术之使用多线程（三）
1. 单元模式和Windows Forms 单元模式线程是一个自动线程安全机制, 非常贴近于COM——Microsoft的遗留下的组件对象模型.尽管.NET最大地放弃摆脱了遗留下的模型,但很多时候它 ...
- JSP | 基础 | Button跳转页面
<input type = "button" value = "登陆" onclick = "window.location.href = 'L ...
- Day2课后作业：sed替换程序
#!/usr/bin/env python #_*_conding:utf-8_*_ import sys,os old_file = sys.argv[1] new_file = sys.argv[ ...
- centOS6.5 usr/src/kernels下为空
用uname -r查看内核版本为 2.6.32-431.el6.x86_64 usr/src/kernels下为空 需要执行两个安装 yum install kernel-headers yum in ...
- 在b站做计网实验 - 抓包/get/post
前言 这篇博文是一个小实验,用python发送get/post请求,其中用到cookie登录bilibili网站并修改个人信息. 抓包 对HTTP应用而言,用浏览器自带的插件可以很方便做到抓包,比如c ...