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-11 16:49:56

    flex布局详解，Flex 布局语法教程

    布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现

  • 2019-09-12 16:32:19

    JSLint,JSHint,ESLint的区别

    主流的JS Lint工具及介绍 JavaScript已经发展蛮长时间了，对应的Lint工具也是层出不穷，下面介绍一下比较主流的几个Lint工具(其实是我用过的几个XD)

  • 2019-09-16 22:56:52

    java.lang.NoSuchMethodError:SpringJAR包版本冲突错误解决方法

    查询了相关资料，大部分都说引起的原因是JAR包错误或JAR包冲突，查看了配置文件，并没有发现错误之处，因为用的是maven工程，这让我想到了maven的JAR引用的传递性，应该是引用的JAR包中传递引用了相同的包，没有排除。通过mvn dependency:tree 命令查看当前工程引用的依赖JAR树

  • 2019-09-17 17:19:42

    strapi 先进的 headless cms

    为什么叫cms而不是框架，主要是因为他提供了一个程序员操作面板，看起来像是一个综合的后台管理，很容易误解具体项目的后台管理，他更像是一个数据库管理面板顺便完成api的自动开发操作。

  • 2019-09-17 17:20:59

    Headless CMS 的介绍

    在本文中，我们将了解Headless CMS，我们将了解它的优点以及何时使用方便。此外，我们将列举实际的主要限制。为了更好地理解HCMS如何在幕后工作，我将解释如何设计和构建RawCMS，一个带有Oauth2的Aspnet.Core Headless CMS，扩展插件系统，业务逻辑支持。该解决方案可在GitHub上获得，并作为演示版在docker hub上发布。

  • 2019-09-17 17:21:58

    Headless CMS 详细介绍

    什么是 Headless CMS? 为什么 Headless CMS 带有真正的革命性？因为它严格的将内容和格式分离，使我们回归到内容管理的本源。这种变化必然会带来一些不确定性。因此，在开始您的第一个 CMS 项目之前，了解 Headless CMS 概念至关重要。因为它和传统的 CMS 有着本质的区别。