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-06-04 17:44:14

    【VUE】图片预览放大缩小插件

    在看项目时，突然看到预览图片的弹窗，感觉好僵硬，不能放大，不能切换，于是便在网上找下关于图片预览的插件，有找到三个插件，具体的优劣势的看自己的使用吧，我目前只是在电脑查看效果，分别是viewerjs插件、基于photoswipe的vue-photo-preview插件以及vue-picture-preview插件 作者：北极星丶超帅的 链接：https://www.jianshu.com/p/e3350aa1b0d0 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

  • 2019-06-04 21:32:05

    Android 全局Dialog的简单实现

    这里所说的全局Dialog是指无论当前应用是处于哪一个页面上，都能够及时弹出Dialog来提示用户一些信息，用户体验不会很好，一般应用于优先级非常高的通知。

  • 2019-06-06 16:14:50

    intent-filter的action，category，data匹配规则

    我们知道有两种方式来启动Activity，显示调用和隐式调用。当使用隐式调用时，又会涉及到IntentFilter的匹配规则。我确信大多数开发者很少关注隐式调用，因为平时开发中用到大多数是显示调用。例如：用Intent直接打开一个Activity，或者用Intent通过包名等其他信息打开另外一个应用等。而隐式调用则使用的比较少，当然也不是完全不使用。例如：当我们需要打开浏览器访问某个链接时，手机上可能存在多个浏览器，我们也无法拿到某一个浏览器的包名，那么一般情况下我们会写如下代码：

  • 2019-06-06 17:57:57

    input【type="checkbox"】标签与字体对齐

    今天分享一个比较实用的技巧，在实际项目中我们会经常遇到表单的input标签多选和单选的问题，但是往往由于标签自身的样式和我们项目的风格很不搭调，就不能实现了，今天就来告诉大家怎么去实现吧。

  • 2019-06-10 11:54:52

    html.div禁用点击事件

    今天做项目中偶然误把元素加上了pointer-events属性，结果导致后来在js中给该元素加点击事件不能用，检查了半天才发现是这个属性的问题。之前没有好好研究，于是决定仔细研究一下。

  • 2019-06-12 22:34:16

    PHP身份证号打星号

    一个很简单的问题，想把身份证的号生日的4位隐藏，一开始查函数居然没有看到，然后用了好几个函数处理，觉得太麻烦就上网搜，后来发现有一个函数就能直接处理，我居然没看到~~初学者~~