vue3+ts+动画效果

最新推荐文章于 2024-09-26 09:51:35 发布

董倩123

最新推荐文章于 2024-09-26 09:51:35 发布

阅读量370

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/dd123412345/article/details/129781844

版权

文章介绍了两种在前端实现动效的方法。第一种是使用wow.js库，通过npm安装后，在Vue组件的onMounted生命周期内初始化，配合HTML数据属性实现动画效果。第二种方法是利用Vant框架的内置动画，通过transition组件和不同的动画类名控制元素的入场和出场效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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