<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. NFS挂载共享文件夹

    修改rcS启动脚本,使开发板初始化完成,自动挂载共享文件夹 修改开发板ip,使之与虚拟机处于同一网段(二者可以互ping)     挂载虚拟机的共享文件夹     rcS 1 ifconfig eth ...

  2. LeetCode1217 玩筹码（贪心）

    题目: 数轴上放置了一些筹码,每个筹码的位置存在数组 chips 当中. 你可以对 任何筹码 执行下面两种操作之一(不限操作次数,0 次也可以): 将第 i 个筹码向左或者右移动 2 个单位,代价为 ...

  3. CSS - input 只显示下边框

      CSS 样式 :   border:none;   border-bottom: 1px solid #000

  4. 关于Arduino MEGA2560 看门狗对bootloader的依赖

    bootloader在Arduino中起着至关重要的位置,arduino-1.5.6-r2版本中的bootloader对看门狗(watchdog)的bug进行了修复:mega2560其实就是使用的AV ...

  5. Gerrit部署成功后project下不显示clone地址

    gerrit部署成功后使用admin账号登录,在project All-projects下不显示clone地址,新建仓库也不显示. 原因是:默认安装没有安装插件download-commands 安装 ...

  6. TP框架数据模型

    1.TP框架的数据模型需要建在Model文件夹下: 1.数据模型 与控制器相似,但是每个数据模型控制一张数据表. 2.数据模型可写可不写,如果不写 则沿用父类数据模型. 2.访问数据库: 1.更改数据 ...

  7. Swift Json解析基础

    func JSONToData(obj:Any) -> Data { //先判断是否可以转换 if !JSONSerialization.isValidJSONObject(obj) { ret ...

  8. composer install、require、update的区别

  9. 【redis】redis底层数据结构原理--简单动态字符串 链表 字典 跳跃表 整数集合 压缩列表等

    redis有五种数据类型string.list.hash.set.zset(字符串.哈希.列表.集合.有序集合)并且自实现了简单动态字符串.双端链表.字典.压缩列表.整数集合.跳跃表等数据结构.red ...

  10. 19 — node 模块化 及 CommonJS规范 — CommonJS 的由来及各组织与 JS 的关系

    ECMAScript  对于不同的环境(运行平台),设计结构,理念,使用方式大相径庭. 1,浏览器 :DOM BOM 2,NodeJS :FS,HTTP 内置模块 :  第三方模块 : 内置模块 3, ...