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-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个条件：

  • 2017-07-17 14:48:20

    通过node.js保存emoji到mysql

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

  • 2017-07-17 17:05:03

    大白话讲解Promise（一）

    去年6月份， ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。

  • 2017-07-19 07:54:11

    Javascript中delete运算符

    Delete是Javascript语言中使用频率较低的操作之一，但是有些时候，当我们需要做delete或者清空动作时，就需要delete操作。在这篇文章中，我们将深入探讨如何使用它，以及它是如何工作的。