Vue.js中的transition组件和animation.c

作者: 乔布斯瞧不起 | 来源:发表于2023-08-06 08:59 被阅读0次

Vue源码分析—组件化(五)
组件注册
11、用 transition 组件轻松实现过渡效果
Vue之transition
Vue单元素/组件的过渡
vue动画过渡-transition-标签
Vue3_21（transition动画组件）
关于 Vue
Vue过渡动画
动画

在Vue.js中使用transition组件和animation.css库可以实现动画效果，但需要注意以下几个问题：

引入animation.css库

在使用animation.css库时，需要先引入该库的CSS文件。可以通过在HTML中添加<link>标签或在Vue组件中添加<style>标签来引入该文件。

<!-- 在HTML中添加<link>标签引入animation.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<!-- 在Vue组件中添加<style>标签引入animation.css -->
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
</style>

为transition组件添加name属性

在使用transition组件时，需要为该组件添加name属性，并将该属性的值设置为动画效果的类名。这样，在Vue.js执行动画时，就会自动添加和删除该类名，从而触发动画效果。

<transition name="animate__animated animate__bounce">
  <!-- 组件内容 -->
</transition>

在动画结束后移除类名

在使用animation.css库时，需要注意在动画结束后及时移除动画效果的类名，否则可能会影响后续的动画效果。

可以通过在transition组件的钩子函数中手动添加和删除类名来实现。例如，在beforeEnter和beforeLeave钩子函数中添加类名，在afterEnter和afterLeave钩子函数中删除类名。

<transition
  name="animate__animated animate__bounce"
  @before-enter="beforeEnter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @after-leave="afterLeave"
>
  <!-- 组件内容 -->
</transition>

methods: {
  beforeEnter(el) {
    el.classList.add('animate__bounceIn');
  },
  afterEnter(el) {
    el.classList.remove('animate__bounceIn');
  },
  beforeLeave(el) {
    el.classList.add('animate__bounceOut');
  },
  afterLeave(el) {
    el.classList.remove('animate__bounceOut');
  }
}

总之，在使用transition组件和animation.css库时，需要注意以上几个问题，以确保动画效果能够正常展示。