vue.js之动画篇
本文引入类库的方式均采用CND的方式，可直接复制代码到编辑器中学习和测试
- 不使用动画切换元素
1 <div id="app">
2 <input type="button" value="toggle" @click="flag=!flag">
3 <!-- 需求：点击按钮，让h3显示，再点击让h3隐藏 -->
4 <h3 v-if="flag">这是一个H3</h3>
5 </div>
6 <script>
7 // 创建Vue实例，得到ViewModel
8 var vm = new Vue({
9 el: '#app',
10 data: {
11 flag: false
12 },
13 methods: {}
14 });
15 </script>- 使用过渡类名实现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>- 修改“v-”前缀用上面一种方式实现多个动画
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
- 使用第三方类库来实现
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
11 <!-- 入场 bounceIn 离场 bounceOut -->
12 </head>
13
14 <body>
15 <div id="app">
16 <input type="button" value="toggle" @click="flag=!flag">
17 <!-- 使用 :duration="{ enter: 200, leave: 400 }" 来分别设置入场的时长和离场的时长 -->
18 <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }">
19 <h3 v-if="flag" class="animated">这是一个H3</h3>
20 </transition>
21 </div>
22
23 <script>
24 // 创建Vue实例，得到ViewModel
25 var vm = new Vue({
26 el: '#app',
27 data: {
28 flag: false
29 },
30 methods: {}
31 });
32 </script>
33 </body>
34
35 </html>- 使用钩子函数模拟-动画的生命周期函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
- 动画列表
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10 <style>
11 li {
12 margin: 5px;
13 line-height: 35px;
14 padding-left: 5px;
15 font-size: 12px;
16 width: 100%;
17 }
18 li:hover {
19 background-color: hotpink;
20 transition: all 0.8s ease;
21 }
22 .v-enter,
23 .v-leave-to {
24 opacity: 0;
25 transform: translateY(80px);
26 }
27 .v-enter-active,
28 .v-leave-active {
29 transition: all 0.6s ease;
30 }
31 /* 下面的 .v-move 和 .v-leave-active配合使用，能够实现列表后续的元素渐渐地漂上来的效果 */
32 .v-move {
33 transition: all 0.6s ease;
34 }
35 .v-leave-active {
36 position: absolute;
37 }
38 </style>
39 </head>
40 <body>
41 <div id="app">
42 <div>
43 <label>
44 Id:
45 <input type="text" v-model="id">
46 </label>
47 <label>
48 Name:
49 <input type="text" v-model="name">
50 </label>
51 <input type="button" value="添加" @click="add">
52 </div>
53 <!-- <ul> -->
54 <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
55 <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
56 <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
57 <!-- 通过 为 transition-group 元素，设置 tag 属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认渲染为span标签 -->
58 <transition-group appear tag="ul">
59 <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
60 {{item.id}} --- {{item.name}}
61 </li>
62 </transition-group>
63 <!-- </ul> -->
64 </div>
65 <script>
66 // 创建 Vue 实例，得到 ViewModel
67 var vm = new Vue({
68 el: '#app',
69 data: {
70 id: '',
71 name: '',
72 list: [
73 { id: 1, name: 'java' },
74 { id: 2, name: 'C#' },
75 { id: 3, name: 'php' },
76 { id: 4, name: 'javascript' }
77 ]
78 },
79 methods: {
80 add() {
81 this.list.push({ id: this.id, name: this.name })
82 this.id = this.name = ''
83 },
84 del(i) {
85 this.list.splice(i, 1)
86 }
87 }
88 });
89 </script>
90 </body>
91 </html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读