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-02-20 18:35:21

    Vue加载组件、动态加载组件的几种方式

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

  • 2020-02-22 13:58:50

    深入理解 requestAnimationFrame

    在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 为了深入理解 requestAnimationFrame 背后的原理，我们首先需要了解一下与之相关的几个概念：

  • 2020-02-22 17:35:14

    使用tweenjs写一个发牌的demo

    移动端h5的三大抽奖方式：转盘，老虎机，翻纸牌。 前两样demo比较多，用户也审美疲劳了。这次微信公众号要抽奖，于是调研了下翻纸牌。

  • 2020-02-22 17:45:43

    tweenjs简单快速学习

    tweenjs 是使用 JavaScript 中的一个简单的补间动画库，支持数字、对象的属性和 CSS 样式属性的赋值。 tweenjs 以平滑的方式修改元素的属性值，需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间（duration），之后 tween 引擎就可以计算从开始动画点到结束动画点之间值，从而产生平滑的动画效果。

  • 2020-02-22 17:47:12

    easeJs入门学习教程

    createjs中包含以下四个部分： EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控） TweenJS：用于做动画效果 SoundJS：音频播放引擎 PreloadJS：网站资源预加载

  • 2020-02-22 17:54:59

    最新FullCalendar中文文档

    Fullcalendar是一款用来管理日程安排、工作计划的日历工具，它功能非常强大而且非常实用。而目前网络上没有很好的中文文档，为了更好的和大家分享Fullcalendar的相关使用，即日起计划将Fullcalendar的英文文档翻译成中文版。