[vue] transition animate.js

533_

已于 2022-06-19 21:47:00 修改

阅读量640

点赞数

分类专栏： # vue 文章标签： vue.js

于 2022-06-19 21:23:22 首次发布

本文链接：https://blog.csdn.net/qq_14993591/article/details/125362577

版权

vue 专栏收录该内容

169 篇文章 3 订阅

订阅专栏

animate.js官网： https://animate.style/

npm install animate.css --save

main.js

import animated from 'animate.css';

// 引入动画
Vue.use(animated);

第一个animate__animated 是基本类

在这里插入图片描述

mode=“out-in”：当前元素先进行离开过渡，完成之后新元素过渡进入。

<transition mode="out-in">
  <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
  <img v-else alt="Vue logo" src="./assets/logo.png" />
</transition>

在这里插入图片描述
appear:一上来就有动画效果

例子：

<transition
	appear
  enter-active-class="animate__animated animate__slideInRight"
  leave-active-class="animate__animated animate__slideOutRight"
  mode="out-in"
>
  <div class="a" v-if="flag">
    <组件1 v-if="!isShowBorad" key="000"></组件1>
    <组件2 v-else key="111"></组件2>
  </div>
</transition>

例子2：

 <transition
 appear
   enter-active-class="animate__animated animate__slideInRight"
   leave-active-class="animate__animated animate__slideOutRight"
   mode="out-in"
 >
   <div class="b" v-if="flag">
     <组件></组件>
   </div>
 </transition>

无效情况：使用了span标签

<div class="title">
  <transition enter-active-class="animate__animated animate__heartBeat">
    <span v-if="index == 0">welcome my web</span>
  </transition>
</div>

现在是animate4

如果是animate3 ,第一个animate 是基本类

<transition
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
    >
      <img :src="pic" alt="" style="width: 200px;height: 300px" v-if="flag">
    </transition>