Question

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

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

我遇到的唯一问题是，如果用户没有等到菜单栏完全跨越网页，那么条形图会闪烁到动画中的位置。我该怎么做才能解决这个问题并使动画从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，宽度转换应该持续2s，一切正常。

如何获得div动画的当前状态？

1 个答案: