15VUE动画-1

2021-02-06 19:35:26 作者：互联网

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .fade-enter{
                opacity: 0;
            }
             .fade-enter-active{
                transition: opacity 3s;
            }
            .fade-leave-to{
                opacity: 0;
            }
            .fade-leave-active{
                /* 如果transition没有定义名字，使用v-leave-to//v-enter */
                transition: opacity 3s;
            }
        </style>
    </head>
    <body>
        <div id="t">
            <transition name="fade">
            <div v-if="show">Hello</div>
            </transition>
            <button type="button" @click="hand1">点我</button>
        </div>
        <script>
            var vm=new Vue({
                el:"#t",
                data:{
                    show:true
                },
                methods:{
                hand1:function(){
                    this.show=!this.show
                }
                    
        
            })
        </script>
    </body>
</html>

标签：opacity,动画,transition,show,15VUE,leave,fade,enter
来源： https://www.cnblogs.com/tilyougogannbare666/p/14382501.html