如何解决从高值到低失真的scale过渡
我正在尝试进行过渡,因此当我单击“我”按钮时,两个div从一个小圆圈缩放到一个大圆圈。基本上,展开后看起来像这样:
这已从scale(1)
变为scale(20)
和scale(25)
。当我单击按钮时,圆圈毫无问题地缩小。但是,如果我将缩放比例增加到scale(40)
和scale(45)
,则再次单击按钮(缩小所有内容)时得到的结果如下:
因此,这是我点击后立即发生的。在这种情况下,我只需打开transition-delay
即可对其进行截图。
圈子的SCSS如下:
.inner-circle-bg {
display: none;
width: 30px;
height: 30px;
border-radius: 100%;
position: fixed;
background: $primaryRed;
bottom: 35px;
right: 35px;
z-index: 999999;
transform: scale(1);
transition: transform 0.3s ease-in;
transition-delay: 4.1s;
&.is-active {
transform: scale(40);
transition: transform 0.3s ease-in;
transition-delay: 0.1s;
}
}
.outer-circle-bg {
display: none;
width: 30px;
height: 30px;
border-radius: 100%;
position: fixed;
background: $primaryRedDark;
bottom: 35px;
right: 35px;
z-index: 99999;
transform: scale(1) ;
transition: transform 0.3s ease-in;
transition-delay: 4.2s;
&.is-active {
transform: scale(45) ;
transition: transform 0.3s ease-in;
}
}
然后,当单击按钮时,我只有一些JS来切换is-active
状态。
是的,您知道是什么原因造成的,以及是否有解决方法?
编辑: 我现在有一个工作的JSfiddle来说明问题(尽管具有悬停效果):
https://jsfiddle.net/47znjxwo/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。