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-09-26 19:03:33

    spring post jackson的反序列化需要无参构造函数

    JSON parse error: Cannot construct instance of `com.**` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of `com.**` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator)  at [Source: (PushbackInputStream); line: 2, column: 2]] ———————————————— 版权声明：本文为CSDN博主「冰夏之夜影」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u011561335/article/details/91346777

  • 2019-09-26 21:46:36

    Shiro整合JWT+Token过期刷新，demo，详解

    最近使用SpringBoot集成Shiro，JWT快速搭建了一个后台系统，Shiro前面已经使用过，JWT（JSON Web Tokens）是一种用于安全的传递信息而采用的一种标准。Web系统中，我们使用加密的Json来生成Token在服务端与客户端无状态传输，代替了之前常用的Session。 系统采用Redis作为缓存，解决Token过期更新的问题，同时集成SSO登录，完整过程这里来总结一下。

  • 2019-09-26 21:48:15

    解决UEditor超出最大字数后只提示不限制的问题

    最近项目用到百度额UEditor文本编辑器，今天测试向我提出了一个问题。就是在输入的文字超过默认的最大字数限制之后，虽然提示“字数超过最大范围，服务器可能拒绝保存”，但是仍然可以点击保存按钮进行保存。

  • 2019-09-27 14:49:33

    Google Guava介绍和体检

    JDK提供的String还不够好么？也许还不够友好，至少让我们用起来还不够爽，还得操心！举个栗子，比如String提供的split方法，我们得关心空字符串吧，还得考虑返回的结果中存在null元素吧，只提供了前后trim的方法（如果我想对中间元素进行trim呢）。

  • 2019-09-28 00:03:21

    shiro的session共享，持久化

    　shiro的session创建与session的查询、更新、过期、删除中，shiro对session的操作基本都讲到了，但还缺一个session共享没有讲解；session共享的原理其实在自定义session管理一文已经讲过了，本文不讲原理，只看看shiro的session共享的实现。