vue中使用animate.css
一:使用animate.css的使用
1.安装npm install animate.css --save
2.在main.js中引入import animate from 'animate.css'
3.组件中使用
<transition name='fade' enter-active-class='animated flash' leave-active-class='animated shake'>
<p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>
主要是在使用动画的外面嵌套transtion标签,加了name、enter-active-class、leave-active-class这样基本就实现了简单的动画,但是刷新页面并不会有动画,要实现要加appear、appear-active-class来实现初始化动画
<transition name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash' leave-active-class='animated shake'>
<p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>
这样就实现了刷新页面也有动画。如果想要在动画过程加transition,过度时间,可以这样写:
<transition name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
<p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button> <style scoped="scoped">
.fade-enter, .fade-leave-to{
opacity:0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 3s;
}
</style>
这样就实现了3s的过渡时间动画。但是这样有个问题是:我们用的animate.css库中实现flash等的时间是1s,而我们这里写的是3s,以哪个为准呢,vue也不知道,这里我们需要在transition 标签中加type属性,说明是以哪种为准。
<transition name='fade' type='transition' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
<p v-show='show'>动画</p>
</transition>
<button @click="handleClick">切换动画</button>
还可以自定义动画时长
<transition :duration='5000' name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
<p v-show='show'>动画</p>
</transition>
复杂一点为:
<transition :duration='{enter:5000,leave:5000}' name='fade' appear appear-active-class='animated flash' enter-active-class='animated flash fade-enter-active' leave-active-class='animated shake fade-leave-active'>
<p v-show='show'>动画</p>
</transition>
如果页面中是多个元素或组件的过渡,可以参考下面的写法:
1.多个元素
这里没有引入animate.css也可以,注意的是一定要加key值,否则没有效果,因为不加key,vue会在切换时候复用dom,加不同的key可以使得vue不复用dom。在transition标签加mode='in-out'实现了先进入再隐藏。在transition标签加mode='out-in'实现了先隐藏再显示。
<template>
<div class="toggle_box">
<transition mode='in-out'>
<div v-if='show' key='hello'>hello word</div>
<div v-else key='bye'>bye word</div>
</transition>
<button @click="handleclick">切换</button>
</div>
</template> <script>
export default{
data(){
return{
show:'true'
}
},
methods:{
handleclick(){
this.show=!this.show;
}
}
}
</script> <style>
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
</style>
2.多个组件的过渡(按照上面的方法也可以实现)下面说一种动态组件的方法
参考地址:https://blog.csdn.net/q3254421/article/details/84593430
<template>
<div class="dy">
<transition mode='out-in'>
<component :is='type'></component>
</transition>
<button @click="handleClick">切换</button>
</div>
</template> <script>
import dyOne from './dynamic_one.vue'
import dyTwo from './dynamic_two.vue'
export default{
data(){
return{
type:'dy-one'
}
},
components:{
'dy-one':dyOne,
'dy-two':dyTwo
},
methods:{
handleClick:function(){
this.type=(this.type === 'dy-one'?'dy-two':'dy-one')
}
}
}
</script> <style>
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
</style>
动态组件主要是component 来实现。
附:部分api
fade: {
title: '淡入淡出',
fadeIn: '淡入',
fadeInDown: '向下淡入',
fadeInDownBig: '向下快速淡入',
fadeInLeft: '向右淡入',
fadeInLeftBig: '向右快速淡入',
fadeInRight: '向左淡入',
fadeInRightBig: '向左快速淡入',
fadeInUp: '向上淡入',
fadeInUpBig: '向上快速淡入',
fadeOut: '淡出',
fadeOutDown: '向下淡出',
fadeOutDownBig: '向下快速淡出',
fadeOutLeft: '向左淡出',
fadeOutLeftBig: '向左快速淡出',
adeOutRight: '向右淡出',
fadeOutRightBig: '向右快速淡出',
fadeOutUp: '向上淡出',
fadeOutUpBig: '向上快速淡出'
},
bounce: {
title: '弹跳类',
bounceIn: '弹跳进入',
bounceInDown: '向下弹跳进入',
bounceInLeft: '向右弹跳进入',
bounceInRight: '向左弹跳进入',
bounceInUp: '向上弹跳进入',
bounceOut: '弹跳退出',
bounceOutDown: '向下弹跳退出',
bounceOutLeft: '向左弹跳退出',
bounceOutRight: '向右弹跳退出',
bounceOutUp: '向上弹跳退出'
},
zoom: {
title: '缩放类',
zoomIn: '放大进入',
zoomInDown: '向下放大进入',
zoomInLeft: '向右放大进入',
zoomInRight: '向左放大进入',
zoomInUp: '向上放大进入',
zoomOut: '缩小退出',
zoomOutDown: '向下缩小退出',
zoomOutLeft: '向左缩小退出',
zoomOutRight: '向右缩小退出',
zoomOutUp: '向上缩小退出'
},
rotate: {
title: '旋转类',
rotateIn: '顺时针旋转进入',
rotateInDownLeft: '从左往下旋入',
rotateInDownRight: '从右往下旋入',
rotateInUpLeft: '从左往上旋入',
rotateInUpRight: '从右往上旋入',
rotateOut: '顺时针旋转退出',
rotateOutDownLeft: '向左下旋出',
rotateOutDownRight: '向右下旋出',
rotateOutUpLeft: '向左上旋出',
rotateOutUpRight: '向右上旋出'
},
flip: {
title: '翻转类',
flipInX: '水平翻转进入',
flipInY: '垂直翻转进入',
flipOutX: '水平翻转退出',
flipOutY: '垂直翻转退出'
},
strong: {
title: '强调类',
bounce: '弹跳',
flash: '闪烁',
pulse: '脉冲',
rubberBand: '橡皮筋',
shake: '左右弱晃动',
swing: '上下摆动',
tada: '缩放摆动',
wobble: '左右强晃动',
jello: '拉伸抖动'
} 附录:页面未加载完之前显示加载中的动画
https://blog.csdn.net/weixin_42568343/article/details/82499625
vue中使用animate.css的更多相关文章
- vue中使用animate.css动画库
1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...
- 在vue中使用animate.css
animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...
- 048——VUE中使用animate.css动画库控制vue.js过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中使用animate.css实现动画
参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...
- vue项目中引入animate.css和wow.js
本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...
- vue+ webpack中的animate.css实现的执行多个连续的动画
1.安装 npm install animate.css 2.使用方法 入口文件App中进行引入 import animate from 'animate.css' 3.多个连续的动画 实现的效果:实 ...
- vue 动画框架Animate.css @keyframes
<script src="vue.js"></script> <link rel="stylesheet" href=" ...
- vue过渡和animate.css结合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在vue中使用animate库
<style> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5) } 100% ...
随机推荐
- QOpenglWidget 与QGLWidget的选择
1. QGLWidget 是Qt OpenGL模块,但是从其官方说明,推荐在Qt5.4 之后,使用QOpenglWidget版本,具体说明如下: Note: This class is part of ...
- 使用PinYin4j.jar将汉字转换为拼音
package com.Test.util; import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j ...
- 使用WPF制作视频监控多画面切换
前言 曾有做过一个产品,有一个功能是视频监控模块,视频监控首先想到的是视频多画面切换功能,由于前端是用WPF开发的,所以当时就做了一个多画面切换组件,效果如下: 功能设计前提: 由于要使用海康大华天地 ...
- 通过EntityFramework操作sqlite(DbFirst)
记录一下通过 EntityFramework6 来操作sqlite过程 环境: visual studio 2017 .net 4.5 Console Application(项目类型) sqlite ...
- Spring IOC 容器源码分析 - 填充属性到 bean 原始对象
1. 简介 本篇文章,我们来一起了解一下 Spring 是如何将配置文件中的属性值填充到 bean 对象中的.我在前面几篇文章中介绍过 Spring 创建 bean 的流程,即 Spring 先通过反 ...
- yum 安装mysql数据库
1.先查看是否有安装mysql,有的话通过yum remove mysql先卸载掉,卸载完成后执行 yum install -y mysql-server mysql mysql-deve 2.启动m ...
- Spring Boot日志管理
SpringBoot内部使用Commons Logging来记录日志,但是默认也提供了对常用日志组件的支持,如:Log4j,Logback等.每种Logger都可以通过配置使用控制台或者文件输出日志内 ...
- zookeeper安装小记
做了5个节点,但是查看状态的时候,发现 ./zkServer.sh statusJMX enabled by defaultUsing config: /opt/zookeeper/bin/../co ...
- pm2 官方文档 学习笔记
一.安装 1.安装 npm install pm2 -g 2.更新 npm install pm2 -g && pm2 update pm2 update 是为了刷新 PM2 的守护进 ...
- 机器学习基石笔记:15 Validation
一.模型选择问题 如何选择? 视觉上 NO 不是所有资料都能可视化;人脑模型复杂度也得算上. 通过Ein NO 容易过拟合;泛化能力差. 通过Etest NO 能保证好的泛化,不过往往没法提前获得测试 ...