引入了 Animate.css 动画库 附链接
安装
npm install animate.css --save
全局引入 --main.js
import "animate.css";
就可以使用了
注意:将类名Animate__animated与其他动画名称一起写,单个动画名称不要忘记Animate__前缀!
<p class="animate__animated animate__XXXXX">动画</p>
使用
1.切换页面时加入【淡入淡出】动画,如:
<transition appear
name="animate__animated animate__bounce"
enter-active-class="animate__fadeIn"
>
<!-- leave-active-class="animate__fadeIn" -->
<router-view />
</transition>
2.点赞、关注等切换图标,如:
<!-- 关注 -->
<div @click="followClick" class="follow">
<i v-if="!follow && followFirst" class="iconfont iconguanzhudianpu"></i>
<i v-if="follow && followFirst" class="iconfont iconyiguanzhu"></i>
<i
v-if="!follow && !followFirst"
class="iconfont iconguanzhudianpu animate__animated animate__pulse"
></i>
<i
v-if="follow && !followFirst"
class="iconfont iconyiguanzhu animate__animated animate__pulse"
></i>
<p>关注</p>
</div>
为了刚进入页面时不跳动画写得有点繁琐。
3.头像下方导航块的出现隐藏,需要【加速动画】效果,可以在类名后加 animate__faster ,如:
<!-- 头像下拉框 -->
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__fadeIn animate__faster"
leave-active-class="animate__fadeOut animate__faster"
>
<!-- leave-active-class="animate__slideOutDown" -->
<AvatarAlart
v-show="AvatarAlartShow"
@mouseover="AvatarAlartChange"
@mouseleave="AvatarAlartShow = false"
class="avatar-alart"
:usertInfo="usertInfo"
/>
</transition>
4.精准控制动画播放时间,可以在类名中加 -2s ,如:
<div class="animate__animated animate__bounce animate__delay-2s">以2秒播放完毕</div>
5.需要反复播放也是可以的,请在类名后加入 __repeat-2 ,如:
<div class="animate__animated animate__bounce animate__repeat-2">重复2次</div>