欢迎莅临 SUN WU GANG 的园子！！！

世上无难事，只畏有心人。有心之人，即立志之坚午也，志坚则不畏事之不成。
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  470 随笔 :: 0 文章 :: 22 评论 :: 30万 阅读
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 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 1 2 3 4 5
Vue学习笔记54--动画效果+过度效果

动画效果

注：多个动画可使用 name 属性处理<transition name='test'>,则需使用test-enter-active替换v-enter-active

示例一：

Test.vue——主要代码文件

?
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
<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <!-- 方式一 class =come  or  go -->
    <!-- <h2 v-show="isShow"
        class="come">你好啊！</h2> -->
 
    <!-- 方式二
      transition 可以写name 属性，如果写了则需要使用name属性替代v
      例如：<transition name='test'>,则需使用test-enter-active替换v-enter-active
      :appear="true" 表示默认启动动画
      注：<transition :appear="true"> 等价于 <transition appear>
    -->
    <!-- <transition :appear="true"> -->
    <transition appear>
      <h2 v-show="isShow">你好啊！</h2>
    </transition>
  </div>
</template>
 
<script>
export default {
  name: 'Test',
  data () {
    return {
      isShow: true,
    }
  }
}
</script>
 
<style scoped>
h2 {
  background-color: bisque;
}
 
/* 方式二写法--vue写法 */
.v-enter-active {
  /* 匀速 */
  /* animation: autoTest 1s linear; */
  animation: autoTest 2s linear;
}
.v-leave-active {
  animation: autoTest 2s linear reverse;
}
 
/* 方式一写法 */
.come {
  /* 匀速 */
  /* animation: autoTest 1s linear; */
  animation: autoTest 2s;
}
.go {
  animation: autoTest 2s reverse;
}
@keyframes autoTest {
  from {
    /* transform: translateX(-100px); */
    transform: translateX(100%);
  }
  to {
    transform: translateX(0100px);
  }
}
</style>

App.vue

?
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
<template>
  <div class="app">
    <Test></Test>
  </div>
</template>
 
<script>
// 引入组件
import Test from './components/Test.vue';
export default {
  name: 'App',
  components: { Test },
  data () {
    return {
      // msg: '消息订阅与发布'
    }
  },
 
}
</script>
 
<style scoped>
.app {
  background-color: rgb(178, 168, 168);
  padding: 15px;
}
</style>

main.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false
 
// console.log('Vue.prototype==>', Vue.prototype)
// console.log('VueComponent.prototype.__proto__==>', Vue.prototype)
 
new Vue({
  render: h => h(App),
}).$mount('#app')

 

 

　　

过度效果

?
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
/* 进入的起点 */
.hello-enter {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}
 
/* 离开的起点 */
.hello-leave {
  /* transform: translateX(-100px); */
  transform: translateX(0);
}
/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}
 
 
等价于==》
/* 进入的起点 ,离开的终点*/
.hello-enter，hello-leave-to {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点,离开的起点 */
.hello-enter-to,
hello-leave {
  transform: translateX(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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <transition name="hello"
                appear>
      <h2 v-show="isShow">你好啊 Test2！</h2>
    </transition>
  </div>
</template>
 
<script>
export default {
  name: 'Test2',
  data () {
    return {
      isShow: true,
    }
  }
}
</script>
 
<style scoped>
h2 {
  background-color: bisque;
  transition: 2s linear;
}
 
/* 方式二写法--vue写法
linear --匀速
 */
 
/* 进入的起点 */
.hello-enter {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}
 
/* 离开的起点 */
.hello-leave {
  /* transform: translateX(-100px); */
  transform: translateX(0);
}
/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}
</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
<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <transition name="hello"
                appear>
      <h2 v-show="isShow">你好啊 Test2！</h2>
    </transition>
  </div>
</template>
 
<script>
export default {
  name: 'Test2',
  data () {
    return {
      isShow: true,
    }
  }
}
</script>
 
<style scoped>
h2 {
  background-color: bisque;
  /* transition: 2s linear; */
}
 
/* h2 中  transition: 2s linear; 可使用下发代码代替  实现过度效果*/
.hello-enter-active,
.hello-leave-active {
  transition: 2s linear;
}
 
/* 进入的起点 离开的终点*/
.hello-enter,
.hello-leave-to {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点 离开的起点*/
.hello-enter-to,
.hello-leave {
  transform: translateX(0);
}
 
/* 离开的起点 */
/* .hello-leave {
  transform: translateX(0);
} */
/* 离开的终点 */
/* .hello-leave-to {
  transform: translateX(-100%);
} */
</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
<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <transition-group name="hello"
                      appear>
      <h2 v-show="isShow"
          key="1">key1 你好啊 Test3！</h2>
      <h2 v-show="isShow"
          key="2">key2 你好啊 Test3！</h2>
    </transition-group>
  </div>
</template>
 
<script>
export default {
  name: 'Test3',
  data () {
    return {
      isShow: true,
    }
  }
}
</script>
 
<style scoped>
h2 {
  background-color: bisque;
  transition: 2s linear;
}
 
/* 方式二写法--vue写法
linear --匀速
 */
 
/* 进入的起点 */
.hello-enter {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}
 
/* 离开的起点 */
.hello-leave {
  /* transform: translateX(-100px); */
  transform: translateX(0);
}
/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}
</style>

注：可借助第三方封装好的插件库完成效果，如下示例

animate.css（animate.style）可实现动画效果的插件库

使用操作步骤(可查看官方文档)：https://animate.style/#documentation

npm install animate.css --save
import 'animate.css';

<h1 class="animate__animated animate__bounce">An animated element</h1>
示例三：
?
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
<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">
      <h2 v-show="isShow"
          key="1">key1 你好啊 Test4！</h2>
      <h2 v-show="isShow"
          key="2">key2 你好啊 Test4！</h2>
    </transition-group>
  </div>
</template>
 
<script>
import 'animate.css';
 
export default {
  name: 'Test4',
  data () {
    return {
      isShow: true,
    }
  }
}
</script>
 
<style scoped>
h2 {
  background-color: bisque;
}
</style>

总结：Vue封装的过度于动画

  1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
  2. 图示

  3. 写法
    • 准备好样式
      • 元素进入的样式
        • v-enter:进入的起点
        • v-enter-active:进入过程中
        • v-enter-to：进入的终点
      • 元素离开的样式
        • v-leave:离开的起点
        • v-leave-active:离开过程中
        • v-leave-to:离开的终点
    • 使用<transition>包裹要过度的元素，并配置name属性。eg：
      • <transition name="hello"
                        appear>
              <h2 v-show="isShow">你好啊 Test2！</h2>
            </transition>
    • 若多个元素需要过度，则需要使用<transition-group>,且每个元素需要指定key值，如下所示：
      • <transition-group name="hello"
                              appear>
              <h2 v-show="isShow"
                  key="1">key1 你好啊 Test3！</h2>
              <h2 v-show="isShow"
                  key="2">key2 你好啊 Test3！</h2>
            </transition-group>
posted on   sunwugang  阅读(8)  评论(0)  编辑  收藏  举报
相关博文：
· Vue学习笔记26--v-text
· Vue学习笔记30--v-pre
· Vue 封装的动画与过度
· Vue封装的过度与动画
· Vue.js 动画效果（p91~p94）
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示