vue3动画效果

系统派来充数的

已于 2024-01-19 11:06:40 修改

阅读量745

点赞数 6

CC 4.0 BY-SA版权

文章标签：动画前端 vue.js javascript css

于 2024-01-08 17:02:52 首次发布

本文链接：https://blog.csdn.net/2301_76513773/article/details/135461497

引入了 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>