<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. 阿里云安装配置nginx

    一.简介 Nginx是一款轻量级的网页服务器.反向代理服务器.相较于Apache.lighttpd具有占有内存少,稳定性高等优势.它最常的用途是提供反向代理服务. 二 .安装 1.准备工作 Nginx ...

  2. 【剑指Offer】面试题32 - I. 从上到下打印二叉树

    题目 从上到下打印出二叉树的每个节点,同一层的节点按照从左到右的顺序打印. 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 返回: [3 ...

  3. Gym - 101190F Foreign Postcards （期望dp）

    题意:有n张标有“C”或“F”的卡片. 1.随机取前k张(1<=k<=n) 2.若这k张的第一张为“C”,则不翻转,否则,全部翻转这k张. 3.然后处理剩下的n-k张 4.重复步骤1~3直 ...

  4. Dockerfile详解，以及构建自定义镜像

    Dockerfile使用 前面的操作我们一直下载下载官方已经构建好的镜像,直接下载后就可以run,如果我们想要在镜像中添加自己的应用,比如在tomcat中添加自己的app,构建一个自定义的镜像,那么我 ...

  5. 082-PHP的do-while循环break跳出

    <?php $i = 1; do { echo $i; $i = $i + 1; if ($i >= 5) { echo "break<br>"; brea ...

  6. jQuery获取display为none的隐藏元素的宽度和高度的解决方案

    1.利用给元素添加行内样式:visibility:hidden;display:block 2.让隐藏元素变成有物理尺寸存在,但不可见,获取元素宽高 3.再给它还原成display为none,去除vi ...

  7. Elasticsearch 过滤

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...

  8. 一、VIP课程：互联网工程专题 03-Maven基本概念与核心配置

    概要: maven 基本概念 maven 核心配置 一.maven  安装与核心概念 概要: maven 安装 maven 编译(compile) 执行测试用例(test) maven 打包 mave ...

  9. mybaits的注解方式与配置文件方式比较

    注解方式比配置文件方式简单了更多. 俩种配置 一个是制定配置文件路径,一个直接class指向dao层接口 只需加一个注解@**** 就能够实现 比写一个xml的配置文件简单更多.

  10. EUI库 - 9 - 数据集合 - 数组集合

      ArrayCollection  当数组内的数据被修改了(增删改),组件能有效的获知 myCollection.addEventListener(eui.CollectionEvent.COLLE ...