Vue笔记_transition组件(过渡样式)

transition组件

作用

transition组件的作用是 给 单个 元素/组件 添加过渡效果；
transition-group组件的作用是给 多个 元素/组件 添加过渡效果；

过渡时机

• vue只有在插入、更新、销毁DOM元素时，才会触发过渡效果
• 所以只有 标签/组件 在被插入、更新、销毁的时候，封装成transition组件才会出现过渡效果。

语法1

• 简单元素

  <transition>
    <div v-if="isShow">toggled contentdiv>
  transition>
  1
  2
  3

• 动态组件

  <transition>
    <component :is="view">component>
  transition>
  1
  2
  3

  • is属性的值为要渲染的组件的组件名；
  • component标签在渲染时会渲染为通过is属性传入的组件，上面代码本质是

    <transition>
      <view> view>
    transition>
    1
    2
    3

  • 因此若是要给组件传值，仍然可以使用 属性名=属性值 的形式进行传递

      <transition>
        <component is='组件名' 属性名=‘属性值’ @方法名=‘方法值’>component>
      transition>
    1
    2
    3

注：transition只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素(类似template)。

语法2

当 标签/组件 使用 transition包裹后，组件的挂载/卸载将会通过以下6个类名以供我们控制过渡效果

• v-enter-active
• v-leave-active
• v-enter
• v-enter-to
• v-leave
• v-leave-to

但是若是页面中存在多个transition并且他们的动画效果不一致时，可以通过name属性来进行单独设置

<transition name='xxx'>transition>
1

如上将name属性设置为xxx，那该组件内包裹的元素的动画效果将会通过以下6个类名进行控制

• xxx-enter-active
• xxx-leave-active
• xxx-enter
• xxx-enter-to
• xxx-leave
• xxx-leave-to

这六个类名的作用分别是什么？ 将会在 使用 中进行具体说明。

使用-animation侦动画

<template>
  <div>
    <button @click="isShow = !isShow">点我改变元素状态</button>
    <transition appear name="move">
      <div v-if="isShow" class="box">transition包裹的标签</div>
    </transition>
  </div>
</template>
<script>
export default{
  data(){
    return{
      isShow:true
    }
  }
}
</script>
<style lang="less" scoped>
@keyframes donghua {
  from{
    transform:  translateX(-100px);
  }
  to{
    transform: translateX(0);
  }
}
//  元素渲染时：在组件“进入”页面时会自动将该类名添加在被transition组件包裹的标签上
.move-enter-active{
  animation: donghua 0.5s linear;
}
// 元素销毁时：在组件“离开”页面时会自动将该类名添加在被transition组件包裹的标签上
.move-leave-active{
  animation: donghua 0.5s linear reverse;
}
.box{
  text-align: center;
  height: 50px;
  line-height: 50px;
  background: pink;
  color: #fff;
}
</style>

</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

• 上述代码的动画效果可以复制打开页面观看
• 
• xxx-enter-active表示元素进入过程中所执行的样式(动画)；
• xxx-leave-active表示元素离开过程中所执行的样式(动画)；

使用-过渡动画

<template>
  <div>
    <button @click="isShow = !isShow">点我改变元素状态</button>
    <transition appear name="move">
      <div v-if="isShow" class="box">transition包裹的标签</div>
    </transition>
  </div>
</template>
<script>
export default{
  data(){
    return{
      isShow:true
    }
  }
}
</script>
<style lang="less" scoped>

// 元素进入过程中的css动画,元素离开过程中的css动画
.move-enter-active,.move-leave-active{
  transition: all 0.3s linear;
}

// 元素进入之前的样式, 元素离开之后的样式
.move-enter,.move-leave-to{
  transform: scale(0);
  opacity: 0;
}
// 元素进入之后的样式，元素离开之前的样式
.move-enter-to, .move-leave{
  transform: scale(1);
  opacity: 0;
}


.box{
  text-align: center;
  height: 50px;
  line-height: 50px;
  background: pink;
  color: #fff;
}
</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

• xxx-enter表示元素进入之前的样式
• xxx-enter-to表示元素进入之后的样式
• xxx-leave表示元素离开之前的样式
• xxx-leave-to表示元素离开之后的样式
• 通过上述类名设置样式后还需要添加一个过渡效果这个过渡效果还是秉承之前的原则->谁过渡给谁加，也可通过xxx-enter-active与xxx-leave-active进行添加；

总结

• 本质：vue就是在监听组件的插入、更新、销毁，然后给其加上对应的类名。
• 6个类
  • [1] xxx-enter-active表示元素进入过程中所执行的样式(动画)
    • 在组件“进入”页面时会自动将该类名添加在被transition组件包裹的标签上
    • 渲染完毕移除该类名;
  • [2]xxx-leave-active表示元素离开过程中所执行的样式(动画)
    • 在组件“离开”页面时会自动将该类名添加在被transition组件包裹的标签上至销毁完毕；
  • [3]xxx-enter表示元素进入之前的样式
    • 在组件“进入”页面时将该类名添加在被transition组件包裹的标签上
    • 进入后将该类名移除(只是一瞬间不易观察)
  • [4] xxx-enter-to表示元素进入之后的样式
    • 在组件“进入”页面后将该类名添加在被transition组件包裹的标签上
    • 渲染完毕移除该类名;
  • [5] xxx-leave表示元素离开之前的样式
    • 在组件“离开”页面时会自动将该类名添加在被transition组件包裹的标签上；
    • 销毁过程中移除(只是一瞬间不易观察)
  • [6]xxx-leave-to表示元素离开之后的样式
    • 在组件“离开”页面后会自动将该类名添加在被transition组件包裹的标签上至销毁完毕；
  • 若是配合帧动画使用-> 仅需[1]、[2]即可；
  • 若是配置过渡动画使用 -> 需要6个类搭配使用；

  逻辑_前后端配置(动态显示页面)

  现在有这样一个需求：
  • 当前页面为一个推广页面，需要推广各种商品；
  • 当点击页面时-> 根据后端返回的名称显示不同的弹框组件(进行不同的商品推广)-> 示例示例链接；
  • 我们可以进行一个配置
    • 每个弹框配置成一个组件；
    • 每次点击页面时后端返回组件名；
    • 通过transition的动态组件匹配进行动态渲染

        <button @click='showcomponentClick'>页面点击事件button>
        <transition>
          <component is='componentPopup' ref='componentpopup'>component>
        transtion>
      1
      2
      3
      4

       data(){
         return{
           componentPopup:''
         }
       },
        component:{
          // 将所有弹框组件进行注册
        },
         methods:{
           showcomponentClick(){
             // [1] 发送请求获取组件名-componentPopup
             this.componentPopup = xxx
             // [2] 显示组件
             this.$refs.componentpopup.show()
           }
         }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16