vue html css,HTML+CSS入门 在vue中使用animate.css

本篇教程介绍了HTML+CSS入门 在vue中使用animate.css，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

animate.css是一款前端动画库，相似的有velocity-animate

用法：

首先

npm install animate.css --save

然后在vue文件的script中引入：

import $ from ‘../assets/js/jquery.js‘;

import animate from ‘animate.css‘

最后绑定元素使用：

hello

methods:{

fade:function(){

$(‘#f‘).addClass(‘animated bounceOutLeft‘)

}

}

部分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: ‘拉伸抖动‘

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！