方法一:引入wow.js
cmd里安装npm i wow.js
script里:
1.引入wow.js
import WOW from "wow.js";
2.onMounted声明周期里创建wow.js
onMounted(() => {
new WOW().init();
});
html里使用:
<div
class="wow animate__animated animate__fadeInRight"
data-wow-duration="1s"
data-wow-delay="0.3s"
>
Text
</div>
方法二:vant内置动画
<!-- 可包裹一个 -->
<transition name="fourth" appear>
<span>内容</span>
</transition>
<!-- 可包裹多个 -->
<transition-group name="listitem">
<span>内容</span>
<span>内容</span>
</transition-group>
style中:
.fourth-enter-active {
animation: slideInDown 0.5s
}
.fourth-leave-active {
animation: slideOutUp 0.5s 0.5s
}
.listitem-enter-active {
animation: fadeInLeft 0.5s;
}
.listitem-leave-active {
animation: fadeOutRight 0.5s;
}