vue中使用animate.css实现动画

1.npm install animate.css --save2.在main.js中
import animate from ‘animate.css‘;

3.使用:
animated 不能漏
<view class="content animated fadeInRight">

4.
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://www.cnblogs.com/huanhuan55/p/11622708.html

时间: 2024-11-05 14:38:26

vue中使用animate.css实现动画的相关文章

在Vue中使用 animate.css 库

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用 animate.css 库</title> <script src="./vue.js"></script> <link rel="stylesheet" type=&qu

3. vue中导入animate.css动画库、Swiper轮播图组件

1. vue中导入animate.css动画库 2. vue中使用Swiper轮播图插件 注意:swiper常用设置 原文地址:https://www.cnblogs.com/qfshini/p/12120612.html

在vue中使用animate.css

animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: import $ from '../assets/js/jquery.js'; import animate from 'animate.css' 最后绑定元素使用: <template> <div class="song"> <p id="f&quo

vue+ webpack中的animate.css实现的执行多个连续的动画

1.安装 npm install animate.css 2.使用方法 入口文件App中进行引入 import animate from 'animate.css' 3.多个连续的动画 实现的效果:实现了三个蓝色方块依次以不同效果展现出来. 模板中代码: <template> <div class="hello"> <div class="box rotateIn" style="animation-duration:2s;a

vue animate.css训练动画案例 列表循环

制作目标动画:向上入场添加数据,点击数据右滑动离场 简单页面效果: 实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animate.css"/>

vue过渡和animate.css结合使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script type="text/javascript" src="vue.js"></script> <link rel="stylesheet&qu

CSS--使用Animate.css制作动画效果

一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu

Vue 中的动画特效

Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U

基于Animate.css的jQuery动画特效插件

janimate是一款非常实用的基于Animate.css的jQuery动画特效插件.该动画特效插件允许你在jQuery代码中操纵Animate.css的66种动画效果.通过该插件可以简化Animate.css的使用,非常方便. 使用这个插件可以通过jQuery选择器来选择你想要进行动画的元素,然后调用jAnimate()或jAnimateOnce()方法,并传入你想要执行动画效果的名称即可. 效果演示:http://www.htmleaf.com/Demo/201504121666.html