<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. 自制spring中bean加载机制，仅做笔记自用

  2. c#实现"扫描检测硬件改动"

    public static class Win32Api { public const int CM_LOCATE_DEVNODE_NORMAL = 0x00000000; public const ...

  3. 五、React事件方法（自写一个方法（函数），然后用按钮onClick触发它、自写方法改变this指向3种写法、

    上接:https://www.cnblogs.com/chenxi188/p/11782349.html 项目目录: my-app/ README.md node_modules/ package.j ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-barcode

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. CF1209A Paint the Numbers

    You are given a sequence of integers a1,a2,…,an. You need to paint elements in colors, so that: If w ...

  6. vant库在vue全局引入toast组件

    第一步: 在config中引入 // 全局引入vant的提示框 import { Toast } from "vant"; Vue.use(Toast); 第二步: 在组要的.vu ...

  7. tornado反向解析

    tornado反向解析 在路由中添加name属性,并且不能使用元组路由,应当由tornado.web.url定义路由. app = tornado.web.Application([ (r'/', I ...

  8. 使用GDI+显示OpenCV中的图像IplImage

    OpenCV虽然自带了轻量级的界面库HighGUI,但是支持的图像化元素实在是太少了,一般只在前期算法测试时使用.实际产品还是使用MFC库.因此本文记录了如何在GDI+中显示OpenCV中的IplIm ...

  9. AD中内电层设置

    用于走线与普铜 内电层分割

  10. hdu3359 Kind of a Blur

    因为变化出来的是平均数,那么就可以对每一个变化出来的列方程,直接高斯消元就行了. #include<bits/stdc++.h> #define N 100005 #define LL l ...