Question

我正在尝试使用菜单本身的变换和菜单按钮上的宽度更改来创建一个似乎从左侧滑入的菜单。按下按钮时，两个动画都通过javascript触发。

如果持续时间设置为相同的数字，则按钮会在菜单前移动，两者都会在不同时间结束。如果持续时间被调整，那么它们会在同一时间结束时轮流相互超越，即使两者都使用线性时序功能。

这看起来完全不合逻辑，如何以不同的速度和长度显示相同的持续时间和时间？

我在我的网站上克隆了关于这个问题的代码，它可以在https://jsfiddle.net/3g83t54t/找到，因为这里的quciker引用是我签署的关键帧和动画规则。

a#menu.closed:hover{
    -webkit-animation:button_fade .1s ease-in forwards;
    margin:0;
    padding:0 7px 0 4px;
    width: 50px;
}
    a#menu.closed:hover div.blurb{
    -webkit-animation:button_blurb_fade .1s ease-in forwards;
    }
    a#menu.open{
    -webkit-animation:button_stretch 1s linear forwards;
    padding: 0 4px;
        width: 100%;
    }
div#sl_nav{
    -webkit-animation:menu_slide_in 1s linear forwards;
}

@-webkit-keyframes button_blurb_fade{
    to{
        background-color: #fff;
    }
}
@-webkit-keyframes button_fade{
    to{
        background: #fff;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
    }
}
@-webkit-keyframes menu_slide_in {
    from{-webkit-transform:translateX(-326px);}
    to{-webkit-transform:translateX(0);}
}
@-webkit-keyframes button_stretch {
    from{width: 50px;}
    to{max-width: 377px;}
}

Answer 1

更改此样式：

@-webkit-keyframes button_stretch {
    from{width: 50px;}
    to{max-width: 377px;}
}

要：

@-webkit-keyframes button_stretch {
    from{width: 50px;}
    to{width: 377px;}
}

~~我想告诉你为什么，但我真的不知道。 ;）~~我认为 max-width会使按钮更多地响应其他正在调整大小的元素，这就是它滞后的原因。通过指定width，您只需将其强制为该大小，而不是让步。

Updated Fiddle

具有相同持续时间的Css3动画在由同一事件触发的不同时间结束

1 个答案: