demo/transition.html

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="Vue-2.0.5.js"></script>
    <style type="text/css">
    .content {
        position: relative;
        width: 960px;
        height: auto;
        margin: 0 auto;
        padding: 20px 0;
    }
    
    fieldset {
        position: relative;
        display: block;
        margin-bottom: 20px;
    }
    </style>
</head>

<body>
    <div class="content">
        <!-- ============================================ -->
        <!-- 前言 -->
        <!-- ============================================ -->
        <fieldset>
            <legend>前言</legend>
            <p>Vue2.0提供了过渡效果动画，这一篇讲述动画。</p>
            <p>大概的处理方式就是：
                <br /> - CSS3.0的动画
                <br /> - JavaScript的处理</p>
            <b>案例1：</b>
            <p></p>
            <div id="demo">
                 <button v-on:click="flag = !flag">
                    点击我切换（Toggle）
                </button>-->
                <transition name="fade" type="animation">
                    <p v-if="show">我就是个动画</p>
                 </transition> 
                 <transition name="fade" mode="out-in">
									 <button v-if="flag" key="save" v-on:click="flag = !flag">save</button>
                   <button v-else key="edit" v-on:click="flag = !flag">edit</button>
								 </transition>
            </div>

    </div>
    </fieldset>
    <style type="text/css">
    .fade-enter-active, .fade-leave-active{
      transition: all .2s;
      opacity: 1;
    }
    .fade-enter, .fade-leave-active {
      opacity: 0;
    }
    
/*    .fade-enter-active {
        animation: bounce-in 1.5s;
    }
    
    .fade-leave-active {
        animation: bounce-out .5s;
    }*/
    
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
    
    @keyframes bounce-out {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(0);
        }
    }
    </style>
    <script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            show: true,
            flag:true,
        }
    });

    // setTimeout(function(){ // document.getElementById("demo_p").style.opacity // },100);

    </script>
    </div>
</body>

</html>