CSS动画学习笔记：第二天

今天写了一下弹框从小到大的效果，用的是animation，用到了transform的scale来进行缩放

HTML代码:

<transition name="fade">
    <div class="dialog-contain" v-show="showDialog">
        我是一个弹窗
    </div>
</transition>
<button @click="showDialog = !showDialog">点击</button>

CSS代码:

.fade-enter, .fade-leave-active {
    animation-duration: .5s;
    animation-name: close;
}
.fade-enter-active {
    animation-duration: .5s;
    animation-name: open;
}
@keyframes open {
     0%{
         transform: scale(0, 0);
     }
     100%{
         transform: scale(1, 1);
     }
 }
@keyframes close {
    0%{
        transform: scale(1, 1);
    }
    100%{
        transform: scale(0, 0);
    }
}