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>


  • 精彩推荐

  • 2017-03-20 17:33:55

    forever守护nodejs进程

    这样可以正常启动应用，但是如果断开客户端连接，应用也就随之停止了。也就是说这样的启动方式没有给应用一个守护线程。

  • 2017-03-22 14:00:51

    Andriod Studio结合Visual Studio Emulator for Android调试Android App

    说到开发就绕不开调试程序，调试Android App我们有2种选择，真机调试和模拟器调试：真机调试相对简单，就不做介绍了,还有一方面原因是由于安卓手机一旦插到电脑上，开始ADB调试后，各种的流氓软件净是往手机上装垃圾应用，妈蛋的；随后就试了几次Android Studio的模拟器之后，无限感慨，真尼玛的卡，卡，卡，，，是可忍孰不可忍.....

  • 2017-03-22 16:26:36

    最全面的Android Webview详解

    现在很多App里都内置了Web网页（Hyprid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图

  • 2017-03-23 22:29:52

    Android开发中Handler的经典总结

    当应用程序启动时，Android首先会开启一个主线程(也就是UI线程)，主线程为管理界面中的UI控件，进行事件分发。

  • 2017-03-27 16:24:26

    laravel，gulp，Browsersync浏览器同步测试

    Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。