vue动画 - 码农教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        .v-enter,
        .v-leave-to{
            opicity:0;
        }
        .v-enter-active,
        .v-leave-active{
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -ms-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;
        }

        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(70px);
        }


        .my-enter-active,
        .my-leave-active{
            transition: all 0.8s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="动起来" @click="flag=!flag">
        <transition>
            <h1 v-if="flag">你好世界</h1>
        </transition>
<br>
        <input type="button" value="动起来" @click="flagg=!flagg">
        <transition name="my">　　　　//my替代v
            <h1 v-if="flagg">你好世界</h1>
        </transition>
    </div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            flag:false,
            flagg:true
        },
        methods:{
        }
    })
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/cycczh/p/11519987.html