ElementUI过渡动画篇

element官方提供的过渡动画并不能很好的满足使用。我尝试过几种过渡动画的设置方式，最终选择了Animate.css。

一、使用方法？

引入

引入：

npm install animate.css --save

然后在mian.js中引入：

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

二、使用

首先后面中css中使用的animation-name属性是过渡动画名，可以移步 https://www.dowebok.com/demo/2014/98/ 查看

使用时有以下三种情况

1、整页使用，例如在切换路由的时候使用。

推荐使用css的写法，否则页面写的不好，会出现很多问题。
先给路由一个class

<router-view class="card-box"></router-view>

然后css里这样，就可以了。

.card-box{height: 98%;animation-name:pulse ; animation-duration: 1s;
}

2、按钮点击使用。

首先，按钮点击事件

 <el-button click="ClickLogin(index)">

然后给需要有过渡动画的盒子加上这个

 <div  :class="{'active':currentSort==index}">

给active一个样式

 .active1{animation-name:flipOutX ; animation-duration: 2s; }

点击后触发事件

 ClickLogin(index){this.currentSort=index;}

这样完成了

3、直接在盒子里实现，（并不是很推荐）。

给他一个class,animate__animated animate__（），括号里接动画名即可

 <div  class="animate__animated animate__flash">

ElementUI过渡动画篇相关推荐

elementUI内置过渡动画的使用
官方文档内置过渡动画 fade 淡入淡出 <template> // 提供 el-fade-in-linear 和 el-fade-in 两种效果 // 1. <transitio ...
第十七篇：修改默认窗口动画缩放、过渡动画缩放的值
(1)在开发者选项中可以去选择"窗口动画缩放"."过渡动画缩放"比例,有客户需求关闭这个动画过程. (2)可以直接在SettingsProvider下去修改默认 ...
CSS高级篇——过渡动画
CSS Transitions 让我们不写一行 JavaScript 代码也能实现过渡动画. 举一个最简单的例子: a:link {color: hsl(36,50%,50%); } a:hover ...
Collapse组件(一) collapse过渡动画
Collapse组件在做内容折叠与展开显示的时候,还是用到很多的.这一个组件的内容相对于Badge和Tag组件更多一点,所以打算分成三篇文章来讲. 高度不固定的css动画第一篇先来讲一讲对于高度不确 ...
[iOS]过渡动画之高级模仿 airbnb
注意:我为过渡动画写了两篇文章: 第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 M ...
Android源码解析(一)动画篇-- Animator属性动画系统
Android源码解析-动画篇 Android源码解析(一)动画篇-- Animator属性动画系统 Android源码解析(二)动画篇-- ObjectAnimator Android在3.0版本中 ...
vue移动端过渡动画_Vue.js实现微信过渡动画左右切换效果
前言需要用到的技术栈:Vue+Vuex 先看看效果图过渡动画示例代码 router.beforeEach(function (to,from,next) { const toIndex = hi ...
iOS学习笔记-自定义过渡动画
代码地址如下: http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swi ...
iOS 开发之动画篇 - 从 UIView 动画说起
毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 -- 这对于app而言是非常重要的. 本文作为动画文集的第一篇, ...

ElementUI过渡动画篇

ElementUI过渡动画篇

一、使用方法？

引入

二、使用

1、整页使用，例如在切换路由的时候使用。

2、按钮点击使用。

3、直接在盒子里实现，（并不是很推荐）。

ElementUI过渡动画篇相关推荐

最新文章

热门文章