11.过渡与动画、nanoid、dayjs、pubsub-js、Animate.css

1.Vue封装的动画：

• 1-1.作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
• 1-2.写法：
  • ①动画样式：动画名atguigu可以修改，相对应的动画函数中的名字需要调整。
  • ②动画：
  • ③使用包裹要过渡的元素，并配置name属性：
    • α：appear属性表示一开始就执行动画。
    • β：name属性用以区分多组动画的标识属性，默认是v，若修改了则样式中的v-enter-active与v-leave-active中的v需要修改为name的属性名。

<style scoped>
.v-enter-active {
  animation: atguigu 0.5s linear;
}

.v-leave-active {
  animation: atguigu 0.5s linear reverse;
}
</style>

<style scoped>
@keyframes atguigu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

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

2.Vue封装过渡：

• 2-1.样式
• 2-2.使用包裹要过渡的元素，并配置name属性：
  • ①appear属性表示一开始就执行动画。
  • ②name属性用以区分多组动画的标识属性，默认是v，若修改了则样式中的v-enter-active与v-leave-active中的v需要修改为name的属性名。
• 2-3.多个元素过渡使用包裹要过渡的元素，且每个元素都要指定key：

/* 进入的起点、离开的终点 */
.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);
}

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

<div>
  <button @click="isShow = !isShow">显示/隐藏</button>
  <transition-group name="hello" appear>
    <h1 v-show="!isShow" key="1">8888</h1>
    <h1 v-show="isShow" key="2">999</h1>
  </transition-group>
</div>

3.Animate.css动画库：

• 3-1.安装：npm install animate.css
• 3-2.引入：import ‘animate.css’
• 3-3.使用：

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

4.nanoid是uuid库的精简版js库：生成唯一的id。

• 4.1.安装：npm i nanoid。
• 4.2使用：

import {nanoid} from 'nanoid'
const todoObj = { id: nanoid() }

5.dayjs 日期格式化处理js 库。

• 5.1.安装：npm i dayjs。
• 5.2使用：dayjs().format(‘YYYY-MM-DD HH:mm:ss’); // 初始化日期时间

6.消息订阅与发布：

• 6-1.一种组件间通信的方式，适用于任意组件间通信。
• 6-2.使用步骤：
  • ①安装pubsub：npm i pubsub-js
  • ②引入：import pubsub from ‘pubsub-js’
  • ③接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
  • ④提供数据：pubsub.publish(‘xxx’,数据)
  • ⑤beforeDestroy钩子中，用PubSub.unsubscribe()去取消订阅。

methods(){
  demo( _, data){......}
}

mounted() {
  this.pubId = pubsub.subscribe('xxx', this.demo) //订阅消息
}

beforeDestroy() {
  pubsub.unsubscribe(this.pubId)
},