<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. MQTT 协议学习：008-在STM32上移植MQTT

    前言 通过前面了解MQTT有关概念.分析了有关的报文,我们对于这个协议也有了更深的认识.但纸上谈来终觉浅,绝知此事要躬行. 本文参考:<STM32+W5500+MQTT+Android实现远程数 ...

  2. 云服务器CentOS7系统环境配置（jdk和tomcat）

    配置jdk 下载与安装 如果没有安装wget,首先安装wget工具 yum -y install wget 安装完成后,在网上找到jdk的下载链接,可以在官网找点击此处到官网下载,如果官网下载慢也可以 ...

  3. Web基础之Dubbo

    Dubbo RPC即Remote Procedure Call,即为远程调用.这和Java的远程代理RMI有点类似,不过RMI只能在Java系统之间进行调用,并且是使用序列化对象的方式进行通信.相比之 ...

  4. UVA - 536 Tree Recovery （二叉树重建）

    题意:已知先序中序,输出后序. #pragma comment(linker, "/STACK:102400000, 102400000") #include<cstdio& ...

  5. P30 Pro劲敌！DxO官宣新机：排行榜又要变

    均为111分,接着是华为Mate 20 Pro.P20 Pro和三星Galaxy S10+,三款机型综合得分均为109分,前10名最后三款机型分别是小米9.iPhone XS Max和HTC U12+ ...

  6. C++ 根据日期判断星期几

    int CaculateWeekDay(int y,int m, int d) { ||m==) { m+=; y--; } *m+*(m+)/+y+y/-y/+y/)%; ; }

  7. IO流常用模式

    主要运用2个设计模式,适配器和装饰者模式.

  8. 配置vSphere Web Client超时值

    1.默认超时值120分钟 2.webclient.properties文件位置:     Windows系统:C:\ProgramData\VMware\vCenterServer\cfg\vsphe ...

  9. Django——优美的Path()函数

    path( )作用:解析URL地址 path( ) 标准语法: (<>为必须的参数,[]为可选参数) path(<route>, <view>, [name=Non ...

  10. 143-PHP printf函数

    <?php $num=123.456; //定义一个浮点数变量 printf('以整数形式输出:%d',$num); //格式化为有符号十进制整数后输出 ?> <?php $num= ...