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 的一些心得. 官网 ...
随机推荐
- 解决At least one JAR was scanned for TLDs yet contained no TLDs. 问题
启动tomcat运行项目时,总是提示: At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug loggin ...
- Git 移除某些文件
一.前言 在使用 Git 版本控制中,有些文件是不需要加入到版本控制中的.如 日志( log ).编译的文件.这些随时都在变的文件,使用用一个代码库的用户.只要稍稍修改一点,或者启动一下,就会变.容易 ...
- JavaScript Symbol
创建: 2019/02/26 完成: 2019/02/26 生成 每次生成的值都不一样(===, ==都是) var sym = Symbol(); // 可以有参数, 是对symbol的说明 v ...
- 算法学习--Day10
今天开始了新一章的学习,前面的题目虽然做了几道,但是我觉得训练量仍然太小了.不过机试确实很多题目,并且难度也有所不同,所以要针对不同的题目进行专门的练习才好.题目类型有些多,等接下来我将搜索的题目写完 ...
- 《C#入门经典》学习笔记（集合、比较和转换）
http://xiang-ai-2002.blog.163.com/blog/static/8477933201041824429161/ 集合 C#中的数组是作为System.Array类的实例来执 ...
- IT兄弟连 JavaWeb教程 JSP内置对象经典面试题
1．请说明cookie.request.session.application的作用域和声明周期? 并说明它们适用与什么场景? request的生命周期是一次请求.可以用于JSP表单提交数据. ses ...
- UIWebView与JavaScript的交互
UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...
- C#邮包计费
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- JavaScript简介和发展史，JavaScript组成和开发工具-乐字节
一.JavaScript简介 JavaScript 是一种具有面向对象能力的.解释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言.它的主要目的是,验证发往服务器端 ...
- hdu 6319 Problem A. Ascending Rating （2018 Multi-University Training Contest 3）
#include <stdio.h> #include <iostream> #include <cstdlib> #include <cmath> # ...