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>


  • 精彩推荐

  • 2020-01-10 10:23:08

    父元素设置min-height子元素设置100%问题

    父元素设置min-height子元素高度设置100%取不到值，这是因为子元素 div设置 height:100%；只有当父级元素满足min-height:1000px;设置的条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的.

  • 2020-01-10 15:48:46

    Linux下查看文件精确到秒的修改时间

    今天排查一个BUG遇到一个问题，错误日志中打印的时间精确到秒，但当根据日志中的时间去找对应文件进行验证的时候，发现通过 ls -l 或者 ll 命令，都无法查看到文件精确到秒的修改时间。

  • 2020-01-10 15:55:05

    linux php yum 安装Imagick

    通过pecl安装Imagick扩展，成功到是成功了，很顺利，但是so包并不在我当年用yum安装的php7.2的扩展包内，我把生成的Imagick.so,移动到当前用的php包内，并不能用，提示 undefined symbol: spl_ce_Countable)) in Unknown on line 0。

  • 2020-01-10 15:57:06

    Centos 安装php Imagick 扩展

    yum install ImageMagick ImageMagick-devel ImageMagick-perl 下一步，验证ImageMagick已经安装在你的系统上并验证它的版本

  • 2020-01-10 19:44:45

    window安装ImageMagick没有conver.exe

    你安装 ImageMagick 的时候有几个勾选安装的选项，里面有一个就是convert.exe。可以全勾选上··以防万一。

  • 2020-01-10 21:59:08

    supervisor 永不挂掉的进程 安装以及使用

    在使用Tp的消息队列 think-queue的时候进程意外结束了!导致项目没法运行; 所以用到了supervisor ; 接下来跟大家分享一下自己的使用心得以及安装到使用的方法;