Vue中的过度与动画

一、Vue中的过度效果

下面让我们一起来学习一下vue中的过滤与动画

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

自动监测目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
在进入/离开的过渡中，会有 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 完成之后移除。

定义过渡效果

在style中使用

.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;
}

enter-active 进入过渡时
leave-active离开过渡时

fade代表过渡效果名称
示例：

<transition name='fade'></transition>

class的切换可以简单理解成，当元素刚插入时，会插入v-enter(v-就是transition中的name属性)和v-enter-active两个class，然后在下一帧会删除v-enter，添加上v-enter-to，最后在transition/animation执行完成后，会直接删除v-enter-to和v-enter-active这两个class，当元素离开时和进入时一致，刚开始离开就添加v-leave和v-leave-active这两个class，然后在下一帧就删除v-leave添加v-leave-to。在显示和离开的整个过程中v-enter-active和v-leave-active是一直存在的，所以才会说在这两个类中定义过渡时间，延迟和曲线函数，结合上面的例子，我们来分析下，整个执行过程：

当我们点击按钮时，页面中的p标签进入离开状态，所以Vue会在p标签上创建两个class，fade-leave、fade-leave-active
进到下一帧，fade-leave会被删除，fade-leave-to会被添加，所以在点击标签的时候才会有字体会猛的变成红色，然后又变回黑色，然后按照fade-leave-active设定的动画，逐渐消失。
文字消失后，我们再次点击按钮，文字会先成红色，然后逐渐展示出来，最后变成黑色，这也是因为整个class添加的顺序是，先添加fade-enter,fade-enter-active然后再添加fade-enter-to，最后在全部删除，分析相关的样式代码，我们能很清晰的看出正规逻辑的执行过程

<template>
<div><button @click='show=!show'>duodu<button><transition name='fale'><p v-if='show'>效果<p></transition><script>export default {data(){return {show:true}}}</script><style>.fale-enter-active,.fale-leave-active{transition: opacity 5s}.fale-enter , .fale-leave-to{opacity:0}.fale-enter-to, .fale-leave{opacity:1;}</style>

2.如果声明了对应的name则可以改写为

css：

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

html：

<div id="app"><transition name="fade"><h3 v-if="show">Hi Boy</h3></transition><button @click="handleClick">DoIt</button></div>

二、Vue中的动画效果

1.使用自定义动画

html不变，关键是css变为如下

@keyframes myfade{from{opacity: 0}to{opacity: 1}}.fade-enter-active{animation: myfade 1s;}.fade-leave-active{animation: myfade 1s reverse;}

实现效果一样，此时我们用的动画，当然动画还有很多效果。

2.采用Animate.css库文件实现动画

使用库文件时我们需要知道除了通过那么调用的另一种调用方法

直接在class中自定义调用的样式

css：

@keyframes myfade{from{opacity: 0}to{opacity: 1}}.enter{animation: myfade 1s;}.leave{animation: myfade 1s reverse;}

html：

<transition name="fade"enter-active-class="enter"leave-active-class="leave"><h3 v-if="show">Hi Boy</h3></transition>

此时的enter和leave时我们完全自定义的样式名。

如果向调用animate.css库只需要改写html

如下：

<transition name="fade"enter-active-class="animated bounce"leave-active-class="animated bounce"><h3 v-if="show">Hi Boy</h3></transition>

bounce未调用的动画名。提示前面必须加animated。

具体想要使用什么动画请移驾到animate.css官网

提示：如果想要在页面初始化时播放动画需要添加appear和appear-active-class

<transition name="fade"appearenter-active-class="animated shake"leave-active-class="animated bounce"appear-active-class="animated shake"><h3 v-if="show">Hi Boy</h3></transition>

资历尚浅，如有错误，欢迎各位朋友及时指正。

Vue中的过度与动画相关推荐

vue中使用hover.css动画
vue中使用hover.css动画介绍:一组 CSS3 驱动的悬停效果,可应用于链接.按钮.徽标.SVG.特色图像等.轻松应用于您自己的元素.修改或仅用于灵感.在 CSS.Sass 和 LESS 中 ...
Vue中的基础过渡动画原理解析
前言在日常开发中动画是必不可少的一部分不仅能让元素直接的切换显得更加自然同时也能极大的增强用户体验因此在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...
vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
js 创建keyframe_Vue中使用create-keyframe-animation与动画钩子完成复杂动画
本篇文章主要介绍了 Vue中使用create-keyframe-animation与动画钩子完成复杂动画,分享给大家如何实现这个动画? 效果分析点`start`的时候,我们把整个动画拆分为两种效果 ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...
vue自定义动画以及animation包在vue中的使用
vue动画自定义动画当vue中,显示隐藏,创建移除,一个元素或者一个组件的时候,可以通过transition实现动画. 如果元素或组件离开,完成一个淡出效果: <transition nam ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...

Vue中的过度与动画

定义过渡效果

Vue中的过度与动画相关推荐

最新文章

热门文章