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 的一些心得. 官网 ...
随机推荐
- 技术胖Flutter第三季-14布局RowWidget的详细讲解
flutter总的地址: https://jspang.com/page/freeVideo.html 视频地址: https://www.bilibili.com/video/av35800108/ ...
- 3、webpack打包出的文件解析
分析打包后的结果,看看打包后的结果是什么东西 把打包后的结果.注释什么的删删‘’ 当前是一个匿名函数. 默认的时候会执行,执行的时候会传一个对象,对象有几部分,第一部分是我们的key.第二部分是我们的 ...
- 详细讲解：零知识证明 之 zk-SNARK 开篇
作者:林冠宏 / 指尖下的幽灵 博客:http://www.cnblogs.com/linguanh/ 掘金:https://juejin.im/user/587f0dfe128fe100570ce2 ...
- E20180712-hm
directive n. 指令; <美>命令,训令,指令; 方针;
- Unity3D教程：无缝地形场景切换的解决方法
http://www.unitymanual.com/6718.html 当我们开发一个大型项目的时候-会遇到这样的问题(地形场景的切换)这个只是字面意思-并不是重场景1的100 100 100坐标 ...
- OPENGL2_基本框架
一些概念 HDC:设备描述句柄(窗口着色描述表句柄),是WINDOWS的一种数据类型,HDC定义的变量指向一块内存,这块内存用来描述一个设备的相关的内容(设备描述表). HGLRC:OpenGL渲染环 ...
- web框架原理,http 协议
目录 web框架原理 web框架是什么东西 执行代码用浏览器访问一下 输出结果 http 协议 http 协议简介 http 协议概述 http 工作原理 http请求方法 http 状态码 url介 ...
- -webkit-line-clamp 兼容性问题
1.一般情况下,想要实现文本超过几行后显示省略号的css. color: #101010; font-size: 14px; text-align: justify; font-family: Sou ...
- 新建Podfile命令
接下来,你需要建立一个主工程.建立成功以后,再次启动终端, 利用cd命令进入到工程文件夹内,此时需要创建一个特殊的文本文件,命令如下: 命令: touch Podfile 创建 命令: open -e ...
- scrapy 安装错误
真的是各种坑啊,哎 安装显示 Building wheel for twisted (setup.py) ... error 解决方法: https://askubuntu.com/questions ...