Bootstrap

vue3+ts+动画效果

方法一:引入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;
}

 

;