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>


  • 精彩推荐

  • 2021-01-21 13:52:36

    node.js使用Nodemailer发送邮件

    常常看到一些网站有邮箱获取验证码验证注册或者修改密码等，今天也来了解一下在nodejs + express怎么发送电子邮件。使用模块Nodemailer。这里以qq邮箱举例子。

  • 2021-01-21 13:55:53

    Mongodb字段更新$unset操作符

    当使用$操作符匹配任何数组元素，$unset替换指定的元素为null而不是删除掉指定的元素，此行为保持数组大小和位置一直；

  • 2021-01-22 08:30:02

    Android IO简化之Okio库

    如果之前有使用过Okhttp，那么你一定知道底层的IO读取是由square公司开发的Okio库。它补充了Java.io和java.nio的不足，以便能够更加方便，快速的访问、存储和处理你的数据。而在一般的开发中，我们也可以使用Okio来做IO读写，非常方便深得我心

  • 2021-01-22 21:56:48

    emcc生成wasm,wast,bc文件的方法

    Emscripten实现把C/C++文件转成wasm，wast（wasm的可读形式）,llvm字节码（bc格式），ll格式（llvm字节码的可读形式）的步骤。

  • 2021-01-22 21:59:34

    emcc编译与部分重要参数选取

    C/C++代码通过emcc编译为字节码，然后根据不同的目标编译为asm.js或wasm。emcc和gcc编译选项类似，例如-s OPTIONS=VALUE、-O等。另外为了适应Web环境，emcc增加了一些特有的选项，如–pre-js 、–post-js 等。

  • 2021-01-22 22:01:19

    Emscripten Compiler Frontend (emcc)

    The Emscripten Compiler Frontend (emcc) is used to call the Emscripten compiler from the command line. It is effectively a drop-in replacement for a standard compiler like gcc or clang.

  • 2021-01-22 22:21:41

    emcc编译命令介绍

    这个输入文件file，既可以是clang可以编译的C/C++语言，也可以是二进制形式的llvm bitcode或者人类可读形式的llvm assembly文件。