vue2过渡与动画和消息的订阅与发布

简介：

Vue的过渡动画允许你定义一个进入和离开的过渡，然后在元素的状态改变时自动应用这些过渡，提升用户体验。它通过 <transition> 标签 这个内置组件，在元素或组件的插入、更新和移除时应用过渡效果（也就是动画），可以通过 CSS 过渡或动画类来实现这些效果。这里来简单记录一下。

⭐封装的过度与动画

在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名

⭐注意事项：

<transition> 组件可以包裹单个元素或组件，当内部元素或组件的状态发生变化时（如通过 v-if 或 v-show 控制显示隐藏），<transition> 会自动检测并添加过渡效果。
<transition> 组件需要与 CSS 结合使用来实现过渡效果，并且需要定义一系列 CSS 类来控制过渡的不同阶段；Vue 会根据元素或组件的状态自动添加或移除这些类。

包裹需要过渡的元素或组件
//使用 <transition> 组件包裹你想要添加过渡效果的元素或组件。

<transition name="fade" appear="true">  
  <div class="test_box" v-if="domFlag">Hello, about!</div>  
</transition>
 

appear=“true” //表示页面首次加载时就触发

//盒子样式
.test_box {
  width: 600px;
  height: 400px;
  line-height: 400px;
  border-radius: 6px;
  margin: 100px auto;
  background-color: plum;
}

2、过渡动画的相关属性介绍
在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name=“fade”，则需要定义以下类：

.fade-enter-active： 定义进入过渡的持续时间、缓动函数等。

.fade-enter-from： 定义进入过渡开始时的样式。

.fade-enter： 定义进入过渡结束时的样式。

.fade-leave-active： 定义离开过渡的持续时间、缓动函数等。

.fade-leave-from： 定义离开过渡开始时的样式。

.fade-leave-to： 定义离开过渡结束时的样式。

3、定义 CSS 过渡效果 //当然，可以写在一起 .fade-enter-active,//进入和离开时
.fade-leave-active { transition: all 0.8s ease; } //进入之前和离开之后
.fade-enter, .fade-leave-to { transform: translateX(200px);
opacity: 0; }

可以看到，这里只用到了4个属性就实现了过渡动画，分别是：

/* fade-enter-active 【入场动画的时间段】 */

/* fade-leave-active 【离场动画的时间段】 */

/* fade-enter 【进入之前，元素的起始状态】 */

/* fade-leave-to 【动画离开之后，离开的终止状态】 */

过渡动画的样式代码在这

.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active {
  transition: all 0.6s linear;
}
.fade-leave-active {
  transform: translateX(-100%);
  transform: scale(0.5);
  transition: all 0.4s linear;
}

可以看到，这里同样也只用到了，4个属性就可以实现过渡动画：

/* fade-enter 【进入之前，元素的起始状态】 */

/* fade-leave-to 【动画离开之后，离开的终止状态】 */

/* fade-enter-active 【入场动画的时间段】 */

/* fade-leave-active 【离场动画的时间段】 */

消息的订阅与发布(基本不用)

消息订阅与发布(pubsub)消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信

使用步骤

1.
安装pubsub:npm i pubsub-js
2.
引入:import pubsub from'pubsub-js
3.
接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

export default{
methods:{
demo(msgName,data){...}
}
...
mounted(){
this.pid = pubsub.subscribe('xxx',this.demo)
}
}

4.
提供数据: pubsub.publish('xxx',data)
5.
最好在 beforeDestroy 钩子中，使用 pubsub.unsubscribe(pid)取消订阅