vue2.0动画
2024-09-07 03:27:23
相对于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>
最新文章
- SQL Server查询第31到40条数据
- JS:call()和apply的区别
- Linux 知识框架
- Python GUI编程--Tkinter
- 【Beta版本】冲刺-Day3
- DataGridView很详细的用法(转载)
- Ruby--hash
- 关于Spring定时任务（定时器）用法
- Linux GDB常用命令一栏
- iOS开发UIScrollView的底层实现
- Httptunnel教程
- Android Studio导入Project的方法
- 全选按钮的设定和POST处理当前循环的列表
- 表单验证的validate.js插件---jQuery Validation Plugin
- ignite通过注解配置查询
- SpringMVC+Spring 事务无法回滚的问题
- Hibernate中cascade属性的区别
- Qt5和VS2017建立开发环境，安装后新建项目找不到Qt选项！！！
- redis学习（九）——数据持久化
- Mybatis Update statement Date null