Vue基础篇之过渡和动画1.Vue的过渡和动画总结代码

139 阅读 0 评论 92 点赞

我是靠谱客的博主愤怒柚子，这篇文章主要介绍Vue基础篇之过渡和动画1.Vue的过渡和动画总结代码，现在分享给大家，希望可以做个参考。

文章目录

1.Vue的过渡和动画
- 1.1过渡
- - 1.1.1、上下逐渐消失的过渡效果
  - 1.1.2、左右消失出现的过渡效果
  - 1.1.3、多元素的
  - 1.1.4、列表的过渡
- 1.2、动画
- - 1.2.1、单一元素的
总结
代码

1.Vue的过渡和动画

意义：Vue 内置了 transition组件用来实现动画和过渡
过渡（transform）和动画（animate）

transition不会被渲染成任何标签在transition加name给动画命名
使用transition组件提供的 name 来定义一些 class 控制的过渡效果
初始 | 过渡中 | 结束

1.1过渡

1.1.1、上下逐渐消失的过渡效果

出现的第一帧

复制代码

1
2
3
4
.fade-enter{
  opacity: 0;
}

出现正在进行的状态

复制代码

1
2
3
4
.fade-enter-active{
   transition: opacity 0.5s
}

出现结束就是元素默认出现的样子一般可以不用设置

复制代码

1
2
3
4
.fade-enter-to{
   opacity: 1;
}

离开时候的第一帧就是元素默认出现的样子一般可以不用设置

复制代码

1
2
3
4
.fade-leave{
   opacity: 1;
}

离开正在进行的状态

复制代码

1
2
3
4
.fade-leave-active{
    transition: opacity 0.5s
}

离开结束

复制代码

1
2
3
4
.fade-leave-to{
   opacity: 0;
}

创建点击事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
 <div>
  <h2>过渡和动画</h2>
  <!-- 创建点击事件-->
  <button @click="toggle">toggle</button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
 </div>
</template>

<script>
export default {
  data(){
    return{
    // hello 的初始状态
      show: true
    }
  },
  methods: {
    toggle(){
    // 每一次点击 toggle 结果都会取反
      this.show = !this.show
    }
  }
}
</script>

1.1.2、左右消失出现的过渡效果

出现的第一帧

复制代码

1
2
3
4
5
6
.move-enter{
  opacity: 0;
  transform: translateX(200px);
}

离开结束

复制代码

1
2
3
4
5
.move-leave-to{
  opacity: 0;
  transform: translateX(-200px);
}

出现正在进行的状态与离开正在进行的状态

复制代码

1
2
3
4
.move-enter-active, .move-leave-active{
  transition: all 1s;
}

创建点击事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
 <div>
  <h2>过渡和动画</h2>
  <button @click="show1 = !show1">切换</button>
  <transition name="move">
    <button style="margin-left: 400px" v-show="show1">on</button>
  </transition>
 </div>
</template>

<script>
export default {
  data(){
    return{
      show1: true
    }
  },
</script>

1.1.3、多元素的

对于多元素所有效果的时候需要给不同的
- key=“xxx”
多元素是同时执行的当他们同时出现的会出现卡顿，解决方法
- 添加一个 mode=“out-in”
- 先执行完前一个动画，在执行下一个动画

出现的第一帧

复制代码

1
2
3
4
5
6
.move-enter{
  opacity: 0;
  transform: translateX(200px);
}

离开结束

复制代码

1
2
3
4
5
.move-leave-to{
  opacity: 0;
  transform: translateX(-200px);
}

出现正在进行的状态与离开正在进行的状态

复制代码

1
2
3
4
.move-enter-active, .move-leave-active{
  transition: all 1s;
}

创建点击事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
 <div>
  <h2>过渡和动画</h2>
 <div style="margin-left: 400px">
    <transition name="move" mode="out-in">
      <button key="on" @click="show3 = false" v-if="show3" >no</button>
      <button key="off" @click="show3 = true" v-else >off</button>
    </transition>
  </div>
 </div>
</template>

<script>
export default {
  data(){
    return{
      show3: true
    }
  },
</script>

在这里插入图片描述

1.1.4、列表的过渡

对于列表的过渡我们需要使用

transition-group 并且写上 name
使用 tag=“规定渲染成什么标签”
:key 保证某一个key的值不重复

步骤一：定义函数

复制代码

1
2
3
4
5
6
7
8
<script>
export default {
  data(){
    return{
      arr:[1,2,3,4,5]
    }
  },

步骤二：展示数组函数

复制代码

1
2
3
4
5
6
7
8
9
10
11
<template>
<div>
  <!-- 列表过渡 -->
  <button @click="add">添加</button> 
  <button @click="del">删除</button> 
  <transition-group class="list" name="demo" tag="div">
    <span style="margin-left: 5px" v-for="i in arr" :key="i">{{i}}</span>
  </transition-group>
 </div>
</template>

步骤三：定义方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
export default {
。。。。。
    // 添加
    add(){
      this.arr.push(this.arr[this.arr.length - 1 ] +1)
      // this.arr.length 数组长度
      // 最大数组长度 this.arr.length - 1
    },
    // 删除
    del() {
      const random = Math.floor(Math.random()*(this.arr.length))
      // Math.random() 随机数 0，1的随机数
      // this.arr.length 为5 
      // Math.random()*(this.arr.length)  不包括0 不包括 5
      //  下于  Math.floor  包括 0-4
      this.arr.splice( random,1 )
      // 删除 一 数
    }
  }
}
</script>

步骤4：建立过渡效果

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.list{
  display: flex;
  margin-left: 200px;
}

// 出现的 第一帧
.demo-enter {
  opacity: 0;
  transform: translateY(-50px);
}
// 结束离开
.demo-leave-to {
  opacity: 0;
  transform: translateY(50px);
}
// 过程时间
.demo-enter-active, .demo-leave-active{
  transition: all 1s;
}

1.2、动画

1.2.1、单一元素的

1）导入动画文件：animate.min.css
2）引入 main.js

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import App from './App.vue'

// 引入动画
import './assets/animate.min.css'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3）使用

对于动画：只有两个状态，一个是初始过程与结束过程

初始过程

复制代码

1
2
3
4
5
.jump-enter-active {
            // 动画名  持续时间
  animation:backInDown 1s linear;
}

结束过程

复制代码

1
2
3
4
.jump-leave-active {
  animation:bounceOutUp 1s linear;
}

创建点击事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
 <div>
  <h2>过渡和动画</h2>
  <!-- 动画-->
  <button @click="show2 = !show2">切换</button>
  <transition name="jump">
    <button style="margin-left: 400px" v-show="show2">唱，跳，rep，篮球</button>
  </transition>
 </div>
</template>

<script>
export default {
  data(){
    return{
      show2: true
    }
  },
</script>

在这里插入图片描述

总结

谁要进行动画给谁加：transition并且对它使用 name进行命名
需要注意动画只有两个状态
- 出现过程：xxxx-enter-active
- 消失过程：xxxx-leave-active
- 对于动画：需要使用 animation来导入动画
谁要进行过渡给谁加：transition并且对它使用 name进行命名
出现：xxxx-enter
- -active 为过程
- -to 为结束
消失：xxxx-leave
- -active 为过程
- -to 为结束

注意：出现结束的状态（xxxx-enter-to）与离开时候的第一帧（xxxx-leave）一般可以不设置

对于多元素的过渡需要使用不同的 key 以及 mode 去设置模式

对于列表的过渡需要使用：
- transition-group 并且写上 name
- 使用 tag=“规定渲染成什么标签”
- :key 保证某一个key的值不重复

过渡与动画的区别：
1.谁用transform谁是过渡，谁用animation谁是动画
2.动画只有两帧 开始过程的帧与结束过程的帧

代码

复制代码

<template>
 <div>
  <h2>过渡和动画</h2>
  <button @click="toggle">toggle</button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
  <button @click="show1 = !show1">切换</button>
  <transition name="move">
    <button style="margin-left: 400px" v-show="show1">on</button>
  </transition>
  <br>
  <button @click="show2 = !show2">切换</button>
  <transition name="jump">
    <button style="margin-left: 400px" v-show="show2">唱，跳，rep，篮球</button>
  </transition>
  <br>
  <div style="margin-left: 400px">
    <transition name="move" mode="out-in">
      <button key="on" @click="show3 = false" v-if="show3" >no</button>
      <button key="off" @click="show3 = true" v-else >off</button>
    </transition>
  </div>
  <br>
  
  <button @click="add">添加</button> 
  <button @click="del">删除</button> 
  <transition-group class="list" name="demo" tag="div">
    <span style="margin-left: 5px" v-for="i in arr" :key="i">{{i}}</span>
  </transition-group>
  <hr>
  
 </div>
</template>

.move-enter{
  opacity: 0;
  transform: translateX(200px);
}

.move-leave-to{
  opacity: 0;
  transform: translateX(-200px);
}

.move-enter-active, .move-leave-active{
  transition: all 1s;
}

.jump-enter-active {
  animation:backInDown 1s linear;
}

.jump-leave-active {
  animation:bounceOutUp 1s linear;
}

.list{
  display: flex;
  margin-left: 200px;
}

.demo-enter {
  opacity: 0;
  transform: translateY(-50px);
}

.demo-leave-to {
  opacity: 0;
  transform: translateY(50px);
}

.demo-enter-active, .demo-leave-active{
  transition: all 1s;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
 <div>
  <h2>过渡和动画</h2>
  <button @click="toggle">toggle</button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
  <button @click="show1 = !show1">切换</button>
  <transition name="move">
    <button style="margin-left: 400px" v-show="show1">on</button>
  </transition>
  <br>
  <button @click="show2 = !show2">切换</button>
  <transition name="jump">
    <button style="margin-left: 400px" v-show="show2">唱，跳，rep，篮球</button>
  </transition>
  <br>
  <div style="margin-left: 400px">
    <transition name="move" mode="out-in">
      <button key="on" @click="show3 = false" v-if="show3" >no</button>
      <button key="off" @click="show3 = true" v-else >off</button>
    </transition>
  </div>
  <br>
  <!-- 列表过渡 -->
  <button @click="add">添加</button> 
  <button @click="del">删除</button> 
  <transition-group class="list" name="demo" tag="div">
    <span style="margin-left: 5px" v-for="i in arr" :key="i">{{i}}</span>
  </transition-group>
  <hr>
  
 </div>
</template>

<script>
export default {
  data(){
    return{
      show: true,
      show1: true,
      show2: true,
      show3: true,
      arr:[1,2,3,4,5]
    }
  },
  methods: {
    toggle(){
      this.show = !this.show
    },
    add(){
      this.arr.push(this.arr[this.arr.length - 1 ] +1)
    },
    del() {
      const random = Math.floor(Math.random()*(this.arr.length))
      this.arr.splice( random,1 )
    }
  }
}
</script>

<style>
/* 刚刚开始时 */
.fade-enter{
  opacity: 0;
}
/* 出现的过程 */
.fade-enter-active{
   transition: opacity 0.5s
}
/* 结束的过程 */
.fade-leave-active{
    transition: opacity 0.5s
}
/* 结束完成 */
.fade-leave-to{
   opacity: 0;
}

.move-enter{
  opacity: 0;
  transform: translateX(200px);
}

.move-leave-to{
  opacity: 0;
  transform: translateX(-200px);
}

.move-enter-active, .move-leave-active{
  transition: all 1s;
}

.jump-enter-active {
  animation:backInDown 1s linear;
}

.jump-leave-active {
  animation:bounceOutUp 1s linear;
}

.list{
  display: flex;
  margin-left: 200px;
}

.demo-enter {
  opacity: 0;
  transform: translateY(-50px);
}

.demo-leave-to {
  opacity: 0;
  transform: translateY(50px);
}

.demo-enter-active, .demo-leave-active{
  transition: all 1s;
}
</style>