VUE弹窗动画-从下到上弹出,从中间展开等
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE弹窗动画-从下到上弹出,从中间展开等相关的知识,希望对你有一定的参考价值。
参考技术A 前言:VUE弹窗动画建议不要参考官网封装好的的transition,本来很简单的一个需要,越看越晕。
先上源码,看不懂再往下看:
开发流程:
1.先写好一个不带动画的弹窗组件,share_cover为遮罩DIV,share_content为内容DIV
2.(核心)
弹窗动画,我们要给内容DIV的CSS加个animation属性。这里我们给animation设置了三个值:动画CSS名,时间,动画播放次数
3.动画CSS名,按照组件功能命名就行,动画效果在@keyframes里面配置
keyframes后面跟动画名,0%表示动画开始的DIV样式,会覆盖掉animation所在DIV的属性。
可以把0%当作vi-if=false时来理解,动画刚开始时候DIV的样式。
比如我们这里0%的时候bottom设置为-5.5rem,那么share_content里面的bottom会开始会被替换成-5.5rem.
5.同理,如果我们想把动画由从上到下换成从中间一个点展开,也是改keyframes
更多动画效果可以参考 这个 ,直接预览看里面的样式文件,拉倒keyframes那一块即可
以上是关于VUE弹窗动画-从下到上弹出,从中间展开等的主要内容,如果未能解决你的问题,请参考以下文章