html - 如何获取 div 动画的当前状态？

Question

我使用的是 Safari，因此为了更容易回答我的问题，我将在我的动画中使用 -webkit- 前缀。

我正在制作一个位于 Angular 落的菜单。当用户悬停时，它会跨越整个网站，直到用户离开菜单，然后它会再次后退。

我遇到的唯一问题是，如果用户不等到菜单栏完全跨越网页，则该栏会闪烁以到达其在动画中的位置。我该怎么做才能解决此问题并使动画从 div 的当前宽度开始？这是我的 CSS:

#menubar {
    /* Menu bar styling */
}

#menubar:hover {
    -webkit-animation: openMenu 2s;
    width: 100%;
}

#menubar:not(:hover) {
    -webkit-animation: closeMenu 2s;
    width: 75px;
}

/* Animations */

@-webkit-keyframes openMenu {
    from {width:75px;}
    to {width:100%;}
}

@-webkit-keyframes closeMenu {
    from {width:100%;} /* How do I get the current width of the div here instead of using width:100%;? */
    to {width:75px;}
}

在此先感谢大家的帮助。

Answer 1

你需要关键帧吗？您可以使用转换来获得相同的结果，例如 fiddle .

#menubar {
    /* Menu bar styling */
    width: 75px;

    transition: width 2s;
}

#menubar:hover {
    width: 100%;
}

基本上，您告诉菜单栏在悬停时应为 100%，空闲时应为 75px，宽度过渡应持续 2 秒，一切正常。