<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. Job for nginx.service failed because the control process exited with error code. See “systemctl stat

    启动nginx服务时如果遇到这个错误 Job for nginx.service failed because the control process exited with error code. ...

  2. ubuntu 中加速pip指令下载插件的速度

    在使用pip下载时很多时候下载速度特别慢,时不时就会发生timeout. 这是因为安装源与本机之间网络不畅导致,其实可以自己指定pip的下载来源,就像指定ubuntu更新源那样. 接下来谈谈步骤: 1 ...

  3. 51nod 1515：明辨是非 并查集合并

    1515 明辨是非 题目来源: 原创 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  关注 给n组操作,每组操作形式为x y p. 当p为1时,如果第x ...

  4. USB Windows驱动 音频解决方案芯片DP108

    DP108是一款完全替代CM108的高度集成的单芯片USB音频解决方案芯片.方便的USB即插即用的兼容性,用户可以快速创建易用性,高质量和便携式USB音频产品基于高度集成的单芯片解决方案.所有重要的模 ...

  5. 【LeetCode】接雨水

    [问题] 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种情况 ...

  6. BZOJ 3332

    题解:给边赋上权值,然后求最大生成树,如果不符合那就无解 证明:留坑 #include<iostream> #include<cstdio> #include<cstri ...

  7. 如何创建一个Asp .Net Web Api项目

    1.点击文件=>新建=>项目 2.创建一个Asp .NET Web项目 3.选择Empty,然后选中下面的MVC和Web Api,也可以直接选择Web Api选项,注意将身份验证设置为无身 ...

  8. 113-PHP使用instanceof判断变量是否为某个类对象

    <?php class ren{ //定义人类 } class mao{ //定义猫类 } $ren=new ren(); //实例化一个人类的对象 $mao=new mao(); //实例化一 ...

  9. 054-for循环

    <?php for($i=1;$i<=5;$i++){ echo "$i<br />"; //循环体 } ?>

  10. 吴裕雄--天生自然C++语言学习笔记：C++ 模板

    模板是泛型编程的基础,泛型编程即以一种独立于任何特定类型的方式编写代码. 模板是创建泛型类或函数的蓝图或公式.库容器,比如迭代器和算法,都是泛型编程的例子,它们都使用了模板的概念. 每个容器都有一个单 ...