vue3中尝试使用animate

初次进入页面就显示动画效果，使用 appear及appear-active-class 来实现

 <transition
    appear
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
    appear-active-class="animated tada"
 >
    <p v-if="show">hello</p>
 </transition>

使用Animate.css类时，需要为类 enter-active-class 和 leave-active-class 设置进入和离开的类，且加基类animated，否者不起作用

 <transition
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
 >
    <p v-if="show">hello</p>
 </transition>

 显性的过渡持续时间

<transition :duration="1000">...</transition>

定制进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

动画与过渡

默认：

<template>
<div>
  <button @click="isShow = !isShow">显示/隐藏</button>
  <transition>
    <h2 v-show="isShow">动画效果</h2>
  </transition>
</div>
</template>

js:

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
 
<style scoped>
/* 动画 */
 
/* 1. 关键帧 (动画效果) */
@keyframes axisX {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
 
/* 2. 过渡类名 */
/* 开始 */
.v-enter-active {
  background: skyblue;
  animation: axisX 1s;
}
/* 结束 */
.v-leave-active {
  background: skyblue;
  animation: axisX 1s reverse;
}
</style>

用过渡动画

<style>
/* 2. 过渡动画 */
/* 开始 */
.v-enter-active {
  animation: axisX 1s;
}
/* 结束 */
.v-leave-active {
  animation: axisX 1s reverse;
}
</style>

<transition name="" appear>
    <h2 v-show="isShow">动画效果</h2>
</transition>

(appear是页面开始时, 自动执行开始过渡动画)

给transition指定name

适合一个组件多个动画

与默认不同的是:
1.name=nameValue
2.开始/结束的过渡类名中的 v 换成 nameValue

过渡效果

 <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="h2">
      <h2 v-show="isShow">动画效果</h2>
    </transition>
 </div>

<style>
h2 {
  background: yellow;
}
 
 
/* 过渡 */
/* 进入起点,离开终点 */
.h2-enter,
.h2-leave-to {
  transform: translateX(-100%);
}
 
/* 进入过程,离开过程 */
.h2-enter-active,
.h2-leave-active {
  transition: 0.5s linear;
}
 
/* 进入终点,离开起点 */
.h2-enter-to,
.h2-leave {
  transform: translateX(0px);
}
</style>

多个元素过渡

<transition-group name="h2" appear="true">
  <h2 v-show="isShow" key="1">动画效果1</h2>
  <h2 v-show="!isShow" key="2">动画效果2</h2>
</transition-group>

<style>
/* 过渡 */
/* 进入起点,离开终点 */
.h2-enter,
.h2-leave-to {
  transform: translateX(-100%);
}
 
/* 进入过程,离开过程 */
.h2-enter-active,
.h2-leave-active {
  transition: 0.5s linear;
}
 
/* 进入终点,离开起点 */
.h2-enter-to,
.h2-leave {
  transform: translateX(0px);
}
</style>