vue 中 animation 使用
简介animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 anima
简介
animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。
虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。
兼容
浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。
官方地址:
github 地址:https://github.com/daneden/animate.css
官方操作文档:https://animate.style/
- npm安装
npm install animate.css --save
or
cnpm install animate.css --save
- 或者yarn安装
yarn add animate.css
- 或者html引入
<link rel="stylesheet" href="animate.min.css">
- 在需要的页面中引入或在main.js全局使用
import animate from animate.css
- 部分动画效果
动画效果属性名 | 中文含义 |
---|---|
fadeIn | 淡入 |
fadeInDown | 向下淡入 |
fadeInDownBig | 向下快速淡入 |
fadeInLeft | 向右淡入 |
fadeInLeftBig | 向右快速淡入 |
fadeInRight | 向左淡入 |
fadeInRightBig | 向左快速淡入 |
fadeInUp | 向上淡入 |
fadeInUpBig | 向上快速淡入 |
fadeOut | 淡出 |
fadeOutDown | 向下淡出 |
fadeOutDownBig | 向下快速淡出 |
fadeOutLeft | 向左淡出 |
fadeOutLeftBig | 向左快速淡出 |
adeOutRight | 向右淡出 |
fadeOutRightBig | 向右快速淡出 |
fadeOutUp | 向上淡出 |
fadeOutUpBig | 向上快速淡出 |
bounceIn | 弹跳进入 |
bounceInDown | 向下弹跳进入 |
bounceInLeft | 向右弹跳进入 |
bounceInRight | 向左弹跳进入 |
bounceInUp | 向上弹跳进入 |
bounceOut | 弹跳退出 |
bounceOutDown | 向下弹跳退出 |
bounceOutLeft | 向左弹跳退出 |
bounceOutRight | 向右弹跳退出 |
bounceOutUp | 向上弹跳退出 |
zoomIn | 放大进入 |
zoomInDown | 向下放大进入 |
zoomInLeft | 向右放大进入 |
zoomInRight | 向左放大进入 |
zoomInUp | 向上放大进入 |
zoomOut | 缩小退出 |
zoomOutDown | 向下缩小退出 |
zoomOutLeft | 向左缩小退出 |
zoomOutRight | 向右缩小退出 |
zoomOutUp | 向上缩小退出 |
rotateIn | 顺时针旋转进入 |
rotateInDownLeft | 从左往下旋入 |
rotateInDownRight | 从右往下旋入 |
rotateInUpLeft | 从左往上旋入 |
rotateInUpRight | 从右往上旋入 |
rotateOut | 顺时针旋转退出 |
rotateOutDownLeft | 向左下旋出 |
rotateOutDownRight | 向右下旋出 |
rotateOutUpLeft | 向左上旋出 |
rotateOutUpRight | 向右上旋出 |
flipInX | 水平翻转进入 |
flipInY | 垂直翻转进入 |
flipOutX | 水平翻转退出 |
flipOutY | 垂直翻转退出 |
bounce | 弹跳 |
flash | 闪烁 |
pulse | 脉冲 |
rubberBand | 橡皮筋 |
shake | 左右弱晃动 |
swing | 上下摆动 |
tada | 缩放摆动 |
wobble | 左右强晃动 |
jello | 拉伸抖动 |
- 使用方法
home.vue
<template>
<div class="home">
<div class="test">这是测试</div>
</div>
</template>
<script>
export default {
name: "Home",
data(){
return {
title:'Home组件'
}
},
}
</script>
<style scoped>
/* scoped */
.test{
animation-name:fadeInLeft ; /*fadeInLeft为要使用的动画效果名,在这里不需要加animate前缀*/
animation-duration: 3s; /*这里设定完成该动画的时间*/
}
</style>
animation 参数:
css3 animation
// animation 参数
-
animation-name 规定需要绑定到选择器的 keyframe 名称。
-
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
-
animation-timing-function 规定动画的速度曲线。
- linear 动画从头到尾的速度是相同的。
- ease 默认。动画以低速开始,然后加快,在结束前变慢
- ease-in 动画以低速开始。
- ease-out 动画以低速结束。
- ease-in-out 动画以低速开始和结束。
-
cubic-bezier(x1, y1, x2, y2) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
函数说明:https://segmentfault.com/a/1190000004618375
-
animation-delay 规定在动画开始之前的延迟。
-
animation-iteration-count 规定动画应该播放的次数。
-
animation-direction 规定是否应该轮流反向播放动画。
- normal 默认值。动画应该正常播放。
- alternat 动画应该轮流反向播放。
-
animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。
-
none 不改变默认行为。
-
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
-
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
-
both 向前和向后填充模式都被应用。
-
更多推荐
所有评论(0)