vue学习笔记十：Jquery VS Vue之页面动画明细对照

系列文章目录

第一篇：Jquery VS Vue之差异比较概览
第二篇：Jquery VS Vue之元素操作明细对照
第三篇：Jquery VS Vue之事件监听明细对照
第四篇：Jquery VS Vue之网络请求明细对照
第五篇：Jquery VS Vue之杂项方法明细对照
第六篇：Jquery VS Vue之全局属性对照
第七篇：Jquery VS Vue之遍历方法对照
第八篇：Jquery VS Vue之页面动画明细对照

---

---

一、前言

本篇对比Jquery中的事件监听相关方法在vue中的实现，本文中的vue对应实现方法可能有多种方式，只列出我所知道的，若有其它对应的操作方法可留言给我补充。
jquery参考文档：jQuery 效果方法
vue参考文档：Vue Api

---

二、明细

2.1 创建相关动画实现：

方法	描述
animate()	对被选元素应用"自定义"的动画
clearQueue()	对被选元素移除所有排队函数（仍未运行的）
finish()	对被选元素停止、移除并完成所有排队动画
stop()	停止被选元素上当前正在运行的动画
dequeue()	移除下一个排队函数，然后执行函数
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
queue()	显示被选元素的排队函数

在vue中的对应实现：
在vue中使用内置组件transition进行实现，具体说明如下：

transition
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

事件：

1. before-enter
2. before-leave
3. enter
4. leave
5. appear
6. after-enter
7. after-leave
8. after-appear
9. enter-cancelled
10. leave-cancelled (仅 v-show)
11. appear-cancelled

用法：
元素作为单个元素/组件的过渡效果。只会把过渡效果应用到其包裹的内容> > 上，而不会额外渲染 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')

2.2快捷动画相关实现：

方法	描述
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
fadeToggle()	在 fadeIn() 和 fadeOut() 方法之间进行切换
hide()	隐藏被选元素
show()	显示被选元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	slideUp() 和 slideDown() 方法之间的切换
slideUp()	通过调整高度来滑动隐藏被选元素
toggle()	hide() 和 show() 方法之间的切换

在vue中的对应实现：
显示隐藏可以使用v-if指令进行控制，切换动画使用css相关样式进行实现。

三、总结

本篇汇总了jquery中一些动画明细对应vue中的实现方式。