vue3加载动画开源

1、首先加载一个动画网站，加载之后解压。

2、其次在components下载vue3组件，将代码放进去，在需要的页面引用。

3、最后注册vue3组件，即可使用该组件。

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

这里是一个典型的例子：

<div id="demo">

<button v-on:click="show = !show">

Toggle

</button>

<transition name="fade">

<p v-if="show">hello</p>

</transition>

</div>

new Vue({

el: '#demo',

data: {

show: true

}

})

.fade-enter-active, .fade-leave-active {

transition: opacity .5s

}

.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {

opacity: 0

}

Toggle

hello

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

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM *** 作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

在需要设置动画标签外部用<transition></transition>包裹，可以添加name属性

出场动画相同 leave

放在@enter钩子绑定的事件

v-enter，v-leave-to，v-enter-active，v-leave-active

transition-group实现原理：

相当于在每一个列表项增加一个 <transition></transition>标签，所以用法基本等同于transition

使用组件进行装，可以采用css或者js的方式，动画封装之后可以直接在需要使用动画的元素外部使用封装的组件进行使用。

slot只是一个占位符，实际上并不是一个真正的元素。而v-show是通过display属性进行显示或隐藏的，而slot本质上并不是一个元素所以没有display属性就不能使用v-show。

PS：之前把v-if底层当做是visibility: hidden实现的，但它们只是效果一样，v-if切换有局部编译和卸载的过程，应该是属于js效果；v-show只是简单的css切换。所以两者的性能也有很大的不同。

---