<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的更多相关文章

  1. CSS3动画框架 Animate.css

    CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...

  2. CSS动画框架Loaders.css +animate.css

    CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...

  3. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  4. vue过渡和animate.css结合使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue中使用animate.css

    一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...

  6. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

  7. 微信网页动画---swiper.animate.css

    项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 在vue中使用animate.css

    animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...

随机推荐

  1. redis改配置

    命令行: 暂时生效,适合于做测试,或者线上马上服务修改,重启失效 CONFIG set stop-writes-on-bgsave-error no OK CONFIG get stop-writes ...

  2. 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 ...

  3. POJ 2142:The Balance

    The Balance Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4781   Accepted: 2092 Descr ...

  4. sqlite if not exists应用实例

    INSERT or replace INTO [main].[RecordInfo]([WorkID],[bArtificialAttendance],[fThreshold],[Attendance ...

  5. django 中从外界借助多个网站时 static 的存放和整理

    在 模板之家中  前端页面直接上去抓取  可是遇到重复  或者 版本不统一  所以 在每个app下面建立自己的 stastic 在制作的html  页面上方 导入静态页面 {% load static ...

  6. thinkphp调用sqlserver储存过程返回多个结果集

    首先安装扩展 windows 分为两个步骤 找到对应自己PHP版本的pdo扩展,下载解压出来,并且在php.ini里面启用扩展,需要注意的问题是php版本以及是否为安全版本 下载 ODBC Drive ...

  7. JAVA基本数据类型和注释

    一.注释 1.注释的概念 注释是程序中给人看的提示信息,会被编译器忽略:在程序编译和执行过程中不会有任何影响,仅仅在代码阅读时提供提示信息. 2.注释的形式 基本语法://注释的内容   a.行注释 ...

  8. SHELL学习笔记三

    SHELL学习笔记一 SHELL学习笔记二 SHELL学习笔记三 for 命令 读取列表中的复杂值 从变量读取列表 从命令读取值 更改字段分隔符 用通配符读取目录 which 使用多个测试命令 unt ...

  9. assert和hasattr,getattr,setattr

    assert hasattr(self, 'initial_data'), ( 'Cannot call `.is_valid()` as no `data=` keyword argument wa ...

  10. ERROR in Cannot find module 'node-sass'

    windows下,通过淘宝的npm镜像安装 npm install node-sass --registry=https://registry.npm.taobao.org (之前安装好过,一段时间没 ...