动画

animate.css + vue 内置 transition

<!--1、引用animate.css-->
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">

<!--2、使用transition，transition包裹的内容就是动画的内容，当进行isShow切换的时候，会呈现指定动画-->
<transition name="bounce"
   enter-active-class="animated zoomIn"
   leave-active-class="animated zoomOut">
    <div class="sale-success" v-if="item.isShow">￥{{item.amount}}</div>
</transition>

<!--3、切换isShow-->
<button @click="isShow=!isShow">切换</button>

注：animate.css 这里使用3.x版本的，使用4.x的时候在手机端（android）曾出现无动画的问题

Props：
- name - string 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。
- appear - boolean，是否在初始渲染时使用过渡。默认为 false。
- persisted - boolean。如果是 true，表示这是一个不真实插入/删除元素的转换，而是切换显示/隐藏状态。过渡钩子被注入，但渲染器将跳过。相反，自定义指令可以通过调用注入的钩子 (例如 v-show) 来控制转换。
- css - boolean。是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
- type - string。指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
- mode - string 控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
- duration - number | { enter: number, leave: number }。指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。
- enter-from-class - string
- leave-from-class - string
- appear-class - string
- enter-to-class - string
- leave-to-class - string
- appear-to-class - string
- enter-active-class - string
- leave-active-class - string
- appear-active-class - string
事件：
- before-enter
- before-leave
- enter
- leave
- appear
- after-enter
- after-leave
- after-appear
- enter-cancelled
- leave-cancelled (仅 v-show)
- appear-cancelled

用法：

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

<!-- 单个元素 -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>

<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>

<!-- 事件钩子 -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>
</div>

const app = createApp({
  ...
  methods: {
    transitionComplete (el) {
      // 因为传递了'el'的DOM元素作为参数
    }
  }
  ...
})

app.mount('#transition-demo')

站点公众号

Vue

动画