美文网首页Vue学习
自定义动画的名字

自定义动画的名字

作者: 椰果粒 | 来源:发表于2018-08-03 17:15 被阅读0次
    <head>
        <style>
            /* 使用keyframe形式的动画 */
            @keyframes bounce-in{
                0% {
                    transform: scale(0);
                }
                50% {
                    transform: scale(1.2)
                }
                100%{
                    transform: scale(1)
                }
            }
            .active{
                transform-origin: left center;
                animation: bounce-in 1s;
            }
            .leave{
                transform-origin: left center;
                animation: bounce-in 1s reverse;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 自定义动画的名字 -->
            <transition 
                name="fade"
                enter-active-class="active"
                leave-active-class="leave"
            >
                    <div v-show="show">hello world</div>
            </transition>
            <button @click="handleChange">显示与隐藏</button>
        </div>
    </div>
    

    相关文章

      网友评论

        本文标题:自定义动画的名字

        本文链接:https://www.haomeiwen.com/subject/mxdyvftx.html