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-04-30 11:23:36

    elasticsearch和analysis-ik的安装使用

    全文搜索和中文分词主要介绍了两组全文搜索加中文分词方案； TNTSearch+jieba-php这套组合对于博客这类的小项目基本够用了；

  • 2019-04-30 11:42:24

    php7+laravel+coreseek（sphinx）中文搜索初步实现（Linux）

    官网www.coreseek.cn已不能下载，所以需从网上找资源， 注意的一点是，笔者安装coreseek-3.2.14版本后，使用时提示client版本高于server版本的错误， php的sphinx扩展，为使用者，为client；coreseek是系统服务，为server

  • 2019-04-30 13:55:13

    浅谈mysql fulltext全文索引优缺点

    为什么会注意到mysql的fulltext？ nima, 还是上次innodb转成tokudb引擎的事，这次alter修改表引擎的时候，提示percona tokudb是不支持fulltext索引的.

  • 2019-04-30 18:56:52

    elasticsearch文档操作

    使用了Elasticsearch提供的一整套强大的REST API，本文继续来看通过这一套API如何完成文档的基本操作。

  • 2019-05-05 14:04:11

    PHP使用CURL模拟POST/GET/PUT/DELETE方式提交数据

    最近因为工作需要，调用网盘接口来上传文件，我用了CURL库, 当然在用CURL库之前必须要在php中启用 cURL 设置 可以通过使用php_info()函数来得到cURL信息，如果看不到cURL信息的话，那么需要设置PHP并开启这个库。在Windows平台下，需要改一改php.ini文件的设置，找到 php_curl.dll，并取消前面的分号注释就行了。

  • 2019-05-07 00:04:04

    Tcpdf不使用css来实现线上合同和签章，图片悬浮

    以前虽然有了解过Tcpdf的用法，但是没有实际的应用过，最近在用tcpdf的时候发现对css支持很有限，使的如果想实现类似html的种种效果都很难，而我这次要做的就是 图片悬浮在文字上方形成类似水印或者盖章的效果。