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

news2024/11/26 21:47:51

transition组件

作用

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

过渡时机

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

语法1

简单元素

<transition>
  <div v-if="isShow">toggled content</div>
</transition>

动态组件

<transition>
  <component :is="view"></component>
</transition>

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

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

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

注：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>

如上将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>

上述代码的动画效果可以复制打开页面观看
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>

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个类搭配使用；