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-07-15 16:13:26

    设置MySQL里的wait_timeout

    如果你没有修改过MySQL的配置，缺省情况下，wait_timeout的初始值是28800。

  • 2017-07-16 20:13:14

    nodejs,express 自制错误日志

    对于同步执行的代码，以上的处理已经足够简单。然而，当异步程序在执行时抛出异常的情况，Express 就无能为力。原因在于当你的程序开始执行回调函数时，它原来的栈信息已经丢失。

  • 2017-07-16 20:17:56

    NodeJS处理Express中异步错误

    本文主要阐述如何在 Express 中使用错误处理中间件（error-handling middleware）来高效处理异步错误。在 Github 上有对应 代码实例 可供参考。

  • 2017-07-17 09:36:47

    linux service 命令使用说明

    service命令用于对系统服务进行管理，比如启动（start）、停止（stop）、重启（restart）、查看状态（status）等。相关的命令还包括chkconfig、ntsysv等，chkconfig用于查看、设置服务的运行级别，ntsysv用于直观方便的设置各个服务是否自动启动。service命令本身是一个shell脚本，它在/etc/init.d/目录查找指定的服务脚本，然后调用该服务脚本来完成任务。

  • 2017-07-17 14:48:15

    通过node.js保存emoji到mysql

    但是emoji通过utf-8编码后，每个字符占4个字节，属于宽字符。而老版本的mysql只支持一个字符占3个字节，所以老版本的mysql是无法存储emoji的。新版本的mysql增加了字符集utf8mb4，可以支持单字符最多占4个字节。utf8mb4是utf8的超集，可以无需修改地支持原来的utf8字符 要让mysql存储emoji，需要满足2个条件：