vue过渡和animate.css结合使用

2017-11-29 17:57:22 
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script type="text/javascript" src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="animate.css">
    <style type="text/css">
        p {
            width: 300px;
            height: 300px;
            background: red;
            margin: 10px auto;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){            var app = new Vue({
                el:'#box',
                data:{
                    show:false
                }
            })
        }    </script></head><body>
    <div id="box">
        <!-- 控制数据的值切换显示隐藏 -->
        <button @click="show=!show">transition</button>
        
        <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated"></p>
        </transition> -->

        <!-- 第二种方法 -->
        <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
            <p v-show="show"></p>
        </transition> -->

        <!-- 多元素运动 -->
        <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated" :key="1"></p>
            <p v-show="show" class="animated" :key="2"></p>
        </transition-group>
    </div></body></html>


  • 精彩推荐

  • 2019-06-13 11:31:32

    Android Studio接入ARouter以及简单使用

    你可能会说如果我的A module依赖了 B module，那么只要在B里面配置是不是就可以了？绝对不行！无论module之间关系如何，必须要同样配置！包括主项目和library项目！

  • 2019-06-13 11:34:24

    Android组件化方案

    1为什么要项目组件化 2如何组件化 3组件化实施流程

  • 2019-06-23 09:22:33

    Android 拍摄（横\竖屏）视频的懒人之路

    一般用在多媒体录制上面，当然如果你只是简单的想录制音频，用它最合适不过，不过如果你想更多样化的录制这里推荐《Android MP3录制，波形显示，音频权限兼容与播放》。今天的主题是录制视频，用的还是老式通用的Camera，不是新的camera2（这就尴尬了.....((/- -)/），反正个人秉承能用是王道的做法（懒）。之前也尝试过FFMPEG的录制合成音频，大小和效果也不错，只是有时候的兼容性确实有些问题，最主要还是资料不多，不好改啊￣へ￣（懒）。

  • 2019-06-23 09:24:59

    仿抖音系列

    最近公司在做个短视频的项目，其中借鉴了很多抖音的设计，其中就有抖音的上下滑切换视频。