从高值到低失真的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 (将#修改为@）

css-transitions scale