使用css完成上推动画

使用@-webkit-keyframes定义动画效果

/*动画上移动*/
.emoji-move-in {
    -webkit-animation: emoji-move-in 0.3s forwards;
    animation: emoji-move-in 0.3s forwards;
}
.emoji-move-out {
    -webkit-animation: emoji-move-out 0.3s forwards;
    animation: emoji-move-out 0.3s forwards;
}

@-webkit-keyframes emoji-move-in {
    0% {
        height: 0;
    }

    100% {
        height: 200px;
    }
}

@-webkit-keyframes emoji-move-out {
    0% {
        height: 200px;
    }

    100% {
        height: 0;
    }
}

这种效果就是点击会上推view0.3s的高度变化

发布了75 篇原创文章 · 获赞 12 · 访问量 3460

猜你喜欢

转载自blog.csdn.net/weixin_44737877/article/details/103020600