一、transition过渡动画原理

当元素被transition标签包裹之后，vue会自动分析被包裹的元素的css样式，然后构建一个动画的流程。

在动画开始执行的瞬间会往div标签上增加两个样式：fade-enter、fade-enter-active,当动画第一帧结束开始第二帧的时候，会移除fade-enter样式，同时加上fade-enter-to样式。在动画执行的最后会将fade-enter-active和fade-enter-to都移除。

tip:

transition上的name是起了个名字，不加name属性后续的vue增加的样式就是v-enter和v-enter-active

在动画隐藏的过程中原理如下：

流程和上诉显示过程一样

代码例子如下

<template><div><transition name="fade"><div v-if="show">hello world</div></transition><button @click="change">切换</button></div>
</template><script scoped>
export default {name: 'BaseAnimate',data () {return {show: true}},methods: {change () {this.show = !this.show}}
}
</script><style scoped>.fade-enter,.fade-leave-to{opacity: 0;}.fade-enter-active,.fade-leave-active{transition: opacity 1s;}
</style>

效果：

二、使用keyframes关键帧

<template><div><transition name="fade"><div v-if="show">hello world</div></transition><button @click="change">切换</button></div>
</template><script>
export default {name: 'keyframes',data () {return {show: true}},methods: {change () {this.show = !this.show}}
}
</script><style scoped>@keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}}
//会自动在页面中name为fade的标签上插入这个样式，或者直接在标签上写enter-active-class和leave-active-class，将写好的css样式名字赋上即可.fade-enter-active{transform-origin: left center;animation: bounce-in 1s;}.fade-leave-active{transform-origin: left center;animation: bounce-in 1s reverse;}
</style>

//也可以使用from to 相当于0%-100%
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

效果

三、在vue中使用animate.css

首先使用npm安装animate.css

npm install animate.css --save

然后在mian.js里引入

import animate from 'animate.css'
Vue.use(animate)

代码如下：animated 类似于全局变量，它定义了动画的持续时间,默认1s；swing是动画具体的动画效果的名称，你可以选择任意的效果。具体效果可查看官网文档animate.css动画演示_dowebok

必须使用enter-active-class和leave-active-class

<transition name="fade"enter-active-class="animated swing "leave-active-class="animated shake "><div v-if="show">hello world</div>
</transition>

效果：

同时使用过渡和动画

在enter-active-class后加入自定义的过渡动画

<transition name="fade"type="transition":duration="{enter:5000,leave:10000}"
//enter和leave分别为入场动画和出场动画的时间appearenter-active-class="animated swing fade-enter-active"leave-active-class="animated shake fade-leave-active"appear-active-class="animated swing">
<!--          type="transition" 设置动画是以transition时间为标准结束还是animate时间为标准结束，animate默认时长是1s-->
<!--          appear-active-class 在页面刷新的时候展示动画效果与appear同时使用-->
<!--         :duration="5000" 自定义动画时长 在此结束后才移除class--><div v-if="show">hello world</div>
</transition>
<style scoped>.fade-enter,.fade-leave-to {opacity: 0;}.fade-enter-active {transform-origin: left center;transition: opacity 1s;}.fade-leave-active {transform-origin: left center;transition: opacity 1s;}
</style>

Vue07---vue中的css动画原理及animate.css使用相关推荐

css 动画重播,javascript – Animate.CSS重播？
我有一个使用Animate.CSS的动画,如果用户愿意,我想重播,但我尝试的不起作用.这是代码: HTML: Replay JS: var $j = jQuery.noConflict(); $j(& ...
使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css
介绍 animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用.非常适合强调,主页,滑块和一般的加水效果. animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性 ...
如何实现vue中的列表动画，如何封装vue动画
文章目录一.vue中的列表动画如何实现列表动画原理: 二.vue中如何封装动画第1个版本:css动画版第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现举个例子: 列表动画原理 ...
VUE 中渲染Echarts 动画柱状图
VUE 中渲染Echarts 动画柱状图效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echart ...
Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
vue中路由的实现原理？
vue中路由的实现原理? 1.首先需要了解一下Vue路由分为两种,一种是哈希路由,其最明显的特征是URL地址带'#'号的,其实对地址栏也就不怎么美观一点.其次是history路由也就是URL不带'#' ...
js写css字体,js如何写出css动画？js写css动画的方法（代码）
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
元素出现在页面时，添加动画，配合animate.css使用
我工作中经常遇到这样的需求:当某个元素出现在页面中时给他加一些动画,于是封装了一个配合animate.css使用的添加动画的函数.为了使用起来方便.哈哈,现在把他总结一下放到这里. 功能:某个元素出现 ...

Vue07---vue中的css动画原理及animate.css使用

一、transition过渡动画原理

二、使用keyframes关键帧

三、在vue中使用animate.css

同时使用过渡和动画

Vue07---vue中的css动画原理及animate.css使用相关推荐

最新文章

热门文章