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 ...
随机推荐
- redis改配置
命令行: 暂时生效,适合于做测试,或者线上马上服务修改,重启失效 CONFIG set stop-writes-on-bgsave-error no OK CONFIG get stop-writes ...
- use matplotlib to draw scatter plot
There are many pionts in this kind of table. How to do it? We can use scatter() to draw it. Code: im ...
- POJ 2142:The Balance
The Balance Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 4781 Accepted: 2092 Descr ...
- sqlite if not exists应用实例
INSERT or replace INTO [main].[RecordInfo]([WorkID],[bArtificialAttendance],[fThreshold],[Attendance ...
- django 中从外界借助多个网站时 static 的存放和整理
在 模板之家中 前端页面直接上去抓取 可是遇到重复 或者 版本不统一 所以 在每个app下面建立自己的 stastic 在制作的html 页面上方 导入静态页面 {% load static ...
- thinkphp调用sqlserver储存过程返回多个结果集
首先安装扩展 windows 分为两个步骤 找到对应自己PHP版本的pdo扩展,下载解压出来,并且在php.ini里面启用扩展,需要注意的问题是php版本以及是否为安全版本 下载 ODBC Drive ...
- JAVA基本数据类型和注释
一.注释 1.注释的概念 注释是程序中给人看的提示信息,会被编译器忽略:在程序编译和执行过程中不会有任何影响,仅仅在代码阅读时提供提示信息. 2.注释的形式 基本语法://注释的内容 a.行注释 ...
- SHELL学习笔记三
SHELL学习笔记一 SHELL学习笔记二 SHELL学习笔记三 for 命令 读取列表中的复杂值 从变量读取列表 从命令读取值 更改字段分隔符 用通配符读取目录 which 使用多个测试命令 unt ...
- assert和hasattr,getattr,setattr
assert hasattr(self, 'initial_data'), ( 'Cannot call `.is_valid()` as no `data=` keyword argument wa ...
- ERROR in Cannot find module 'node-sass'
windows下,通过淘宝的npm镜像安装 npm install node-sass --registry=https://registry.npm.taobao.org (之前安装好过,一段时间没 ...