vue 动画框架Animate.css @keyframes
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<style>
/*@keyframes bounce-in {*/
/* 0% {*/
/* transform:scale(0);*/
/* }*/
/* 50% {*/
/* transform:scale(1.5);*/
/* }*/
/* 100% {*/
/* transform:scale(1);*/
/* }*/
/*}*/
/*.active {*/
/* transform-origin:left center;*/
/* animation: bounce-in 1s;*/
/*}*/
/*.leave {*/
/* transform-origin:left center;*/
/* animation: bounce-in 1s reverse;*/
/*}*/
</style>
<body>
<section class="app">
<transition name="fade"
enter-active-class="animated flip"
leave-active-class="animated hinge">
<article v-if="show">Selecte</article>
</transition>
<button @click="handle">Option</button>
</section>
<script>
var vm = new Vue({
el:".app",
data: {
show:true
},
methods: {
handle:function () {
this.show = !this.show
}
}
}) </script>
</body>
上面是动画效果
Vue同时使用过渡和动画效果
1.页面首次加载需要显示的样式
transition标签中 加apper和 apper-active-class=“animated 动画效果”
2.同时拥有别的动画效果 需要在transition label load
enter-active-class="animated swin(name) fade-enter-active"
然后写css样式
3.动画执行时间以谁的为准 vue有时候也不清楚
transition标签内规定
type=“transition” (如何设置以另一种为标准)
自定义时长:
:during=“1000” (1s)
复杂自定义动画播放时长
:during=“{enter: 5000, leave:2000}”
vue 动画框架Animate.css @keyframes的更多相关文章
- CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
- CSS动画框架Loaders.css +animate.css
CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...
- css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
- vue过渡和animate.css结合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中使用animate.css
一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...
- vue中使用animate.css动画库
1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...
- 微信网页动画---swiper.animate.css
项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 048——VUE中使用animate.css动画库控制vue.js过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在vue中使用animate.css
animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...
随机推荐
- 微信小程序实现左滑删除效果(原生/uni-app)
实现效果 列表中侧滑删除 删除不同时存在 scrollview上下滑动与侧滑删除不影响 uni-app实现 html部分 <template> <scroll-view :scrol ...
- CAD转PDF再由pdf转jpg图片
免费的PDF转JPG图片 https://www.gaitubao.com/pdf-to-jpg/
- C++面试常见问题——09static关键字
static关键字 局部变量 局部变量 局部变量是最常见的量,编译器不会对其进行初始化,除非对其显式赋值,不然初始值是随机的. 普通局部变量存储在栈空间,使用完毕后会立即被释放. 静态局部变量 静态局 ...
- Redis 详解 (二) redis的配置文件介绍
目录 1.开头说明 2.INCLUDES 3.MODULES 4.NETWORK 5.GENERAL 6.SNAPSHOTTING 7.REPLICATION 8.SECURITY 9.CLIENTS ...
- matlab和fortran混合编程
matlab2016b+vs2010+ivf2013+f90 其实默认是f77语法,但通过配置可以改变为自由格式. 默认只能f77代码,怎样修改: https://ww2.mathworks.cn/m ...
- 088-PHP数组运用 - 通过循环函数过滤部分数组
<?php function myfunc(&$arr){ //自定义一个过滤函数 $j=count($arr); for($i=0;$i<$j;$i++){ if($arr[$i ...
- 第二阶段scrum-5
1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 注册登陆界面功能正在实装,前端制作完成 数据库配置中
- JDBC获取数据库连接慢
RHEL6.4 获取Oracle数据库链接时快时慢,RHEL7.3获取Oracle数据库链接时一直很慢能够达到五万毫秒. 解决方法: 修改$JAVA_HOME/jre/lib/security/jav ...
- Java Integer Addition Subtration Overflow 整数加减溢出
leetCode有道题Reverse Integer,因为int的最大值为2的31次方减一,最小值为-2的31次方. 我一开始的代码将res递归加放在try中,以为溢出会有异常,然而并没有. 因为出传 ...
- Java学生成绩系统
package text; public class helloworld{ private String stunumber; private String name; private double ...