<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. 实训23 功能FC的建立与调用

    第4章:实训23 功能的生成与条用 功能简称FC 是用户编写的没有自己存储区的逻辑块 . 功能主要用来执行条用一次就可以完成的操作. 类似于C语言中的 函数 步骤一 单击确定 以后 出现了 在下面图框 ...

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

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

  3. 启用root关闭客人会话

    1.位root用户设置密码: sudo passwd root 2.修改配置文件/usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf(先备份) 添加如下在文 ...

  4. 114-PHP判断类变量是否相同

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

  5. log4j 打印日志

    # Set log levels #     设置日志级别 log4j.rootLogger = INFO, DebugFile,Console, LogFile, ErrorFile ## Disa ...

  6. ssh-keygen 签名ca证书

    介绍 ssh-keygen命令用于为"ssh" 生成,管理和转换认证秘钥,支持RSA和DSA两种认证秘钥 生成秘钥对 ssh-keygen -b 2048 -C milo -f 2 ...

  7. linux----查看系统版本命令

    uname -a 可显示电脑以及操作系统的相关信息 cat /proc/version 说明正在运行的内核版本 cat /etc/issue 显示的是发行版本信息

  8. 每天一点点之vue框架开发 - vue-router路由在循环中携带参数

    场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据 因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...

  9. Rancher第一款Kubernetes操作系统推出

    Rancher实验室推出了业界首款针对Kubernetes的轻量级操作系统k3OS.它具有极低的资源消耗,最小的操作和二级引导,极大地简化了低资源计算环境. Kubernetes操作,提高Kubern ...

  10. 关于SI4432数据手册的简单讲解

    SI4432是高度集成度单芯片无线ISM收发器件.EZRadioPRO系列包括了发射机.接收机和射频收发器,让设计工程师可以有选择的设计利用里面的无线部分. SI4432提供了先进的无线功能,包括连续 ...