Vue过渡类、使用animate.css、设置动画延持续迟及时间（个人笔记）

最新推荐文章于 2024-05-06 19:28:55 发布

lukaka_

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量2.9k

点赞数 2

文章标签： vue.js css 动画

本文链接：https://blog.csdn.net/lukaka_/article/details/124689666

版权

过渡

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.cs
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

上面是官网的描述，其实就是动画淡入淡出，咱们再来了解一下 vue 的单元素和组件过渡

例子：

//dom
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

//script
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

//style
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
}

transition组件：

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：