src_过渡与动画

文章发布较早，内容可能过时，阅读注意甄别。

# 代码

# `代码路径`

$ tree -N
.
├── App.vue
├── components
│   ├── Test.vue
│   ├── Test2.vue
│   └── Test3.vue
└── main.js

1
2
3
4
5
6
7
8

# `App.vue`

<template>
  <div id="app">
    <Test></Test>
    <Test2></Test2>
    <Test3></Test3>
  </div>
</template>

<script>
    import Test from './components/Test.vue'
    import Test2 from './components/Test2.vue'
    import Test3 from './components/Test3.vue'

    export default {
        name:'App',
        components:{Test,Test2,Test3},
    }
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-edit {
  color: #fff;
  background-color: skyblue;
  border: 1px solid rgb(119, 181, 206);
  margin-right: 5px;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</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

# `Test.vue`

// 利用样式编写实现

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="hello" appear>
        <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: orange;
    }
    .hello-enter-active{
        animation: qwe 0.5s linear;
    }
    .hello-leave-active{
        animation: qwe 0.5s linear reverse;
    }
    @keyframes qwe {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</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

# `Test2.vue`

// 利用样式编写实现

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="hello" appear>
        <h1 v-show="!isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">尚硅谷！</h1>
    </transition-group>
  </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: orange;
    }
    /* 进入的七点，离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    .hello-enter-active,.hello-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点，离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }
</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

# `Test3.vue`

// 利用三方库实现

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp">
        <h1 v-show="!isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">尚硅谷！</h1>
    </transition-group>
  </div>
</template>

<script>
    import 'animate.css'
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        },
    }
</script>

<style scoped>
    h1{
        background-color: orange;
    }
    /* 进入的七点，离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    .hello-enter-active,.hello-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点，离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }
</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

# `main.js`

import Vue from "vue"
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    components:{App},
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
});

1
2
3
4
5
6
7
8
9
10
11
12
13

# 笔记

作用：在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名。
写法：
准备好样式：

  - 元素进入的样式：
    1.  `v-enter：`进入的起点
    2.  `v-enter-active：`进入过程中
    3.  `v-enter-to：`进入的终点
  - 元素离开的样式：
    1.  `v-leave：`离开的起点
    2.  `v-leave-active：`离开过程中
    3.  `v-leave-to：`离开的终点

使用 <transition> 包裹要过度的元素，并配置 name 属性：

  ```vue
  <transition name="hello">
      <h1 v-show="isShow">你好啊！</h1>
  </transition>
  ```

备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定 key 值。

上次更新: 2022/08/19, 09:49:20

← src_TodoList_nextTick src_TodoList_动画→

src_过渡与动画

# 代码

# 代码路径

# App.vue

# Test.vue

# Test2.vue

# Test3.vue

# main.js