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 ...
随机推荐
- Spark学习入门(让人看了想吐的话题)
这是个老生常谈的话题,大家是不是看到这个文章标题就快吐了,本来想着手写一些有技术深度的东西,但是看到太多童鞋卡在入门的门槛上,所以还是打算总结一下入门经验.这种标题真的真的在哪里都可以看得到,度娘一搜 ...
- 活动目录对象属性批量修改工具------ADModify
最近下载了一个可以修改活动目录用户.组.联系人等活动目录对象属性的工具,试用了一下,发现还是蛮好用的,并且还可以修改对象的扩展属性,如:在活动目录中安装了Exchange 2003,Exchange ...
- 国产超低功耗蓝牙5.0 PHY6202替换NRF51822
现在在智能穿戴领域市场不断的追求低功耗.低成本的蓝牙芯片.蓝牙芯片目前除了Dialog公司研制蓝牙芯片是最求超低功耗的但是对于其它性能上还比较满足不了其它领域的功能,另外NORDIC.TI的蓝牙芯片虽 ...
- cf749 D. Leaving Auction
#include<bits/stdc++.h> #define lowbit(x) x&(-x) #define LL long long #define N 200005 #de ...
- JDK源码阅读-------自学笔记(一)(java.lang.Object重写toString源码)
一.前景提要 Object类中定义有public String toString()方法,其返回值是 String 类型. 二.默认返回组成 类名+@+16进制的hashcode,当使用打印方法打印的 ...
- Day 21：网络编程（2）
以课程中feiQ为例,feiQ作为一个典型的网络编程应用,用一段代码尝试给自己的发送消息 import java.io.IOException; import java.net.DatagramPac ...
- mac安装和启动mongodb
使用使用 brew安装mongodb 可以使用 OSX 的 brew 来安装 mongodb: sudo brew install mongodb 如果要安装支持 TLS/SSL 命令如下: sudo ...
- sql 左联 右联 内联的区别
如有表a(col1,col2),a,1b,1 b(col1,col2)a,3c,2 内部联接是指只返回符合联接条件的资料,如select * from a join b on a.col1 = b.c ...
- 【pwnable.kr】passcode
pwnable从入门到放弃,第六题. ssh passcode@pwnable.kr -p2222 (pw:guest) 完全是‘&’的锅. #include <stdio.h> ...
- Java8大排序算法
一.冒泡排序 基本思想:通过对待排序序列此前向后,依次比较相邻元素的值,若发现逆序则进行交换,使得较大的值从前面移动到后面, 类似于水下的气泡一样(是所有排序算法中效率最低的) publi ...