Question

我正在尝试修复在悬停时触发的CSS转换错误。问题是如果你在按钮上快速悬停和取消悬停，它们就会完全错过。

有没有办法等待css动画在触发“直播”动画之前完成？

是的，我检查了很多'修复'，但这有点复杂。

点击此处的网站：http://i280133.iris.fhict.nl/jongens/index.php。这与菜单悬停过渡有关。

$(".navbar-nav>li>a").hover(function(){
  $(this).addClass("animate");
  $(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
                    $(this).removeClass("animate");
  });       
})

.navbar-nav>li>a:after {
    content: '';
    display: block;
    position: absolute;
    z-index:-1;
    right:0;
    height: 2px;
    width: 0;
    background: #f8ff86;
    transition: width .5s ease-in-out;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    -moz-transition: 0.2s;
}
 
.navbar-nav>li>a:hover:after {
    width: 100%;
    left:0;
    right:auto;
    background: #f8ff86;

}

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="index.php"><img src="img/logo-yellow.png" /></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


              <ul class="nav navbar-nav navbar-right">
                <li><a href="info.php">info</a></li>
                <li><a href="werk.php">werk</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
</body>

Answer 1

尝试使用$ .when和deferred.then函数。有关详细信息，请查看https://api.jquery.com/jquery.when/

$.when(processIsDone).then(function(){doTHis});

Answer 2

查看此示例。似乎做你想做的事：

http://codepen.io/wired/pen/bwbzWm

div.wrap
  nav.menu
    ul.menu__list
      li.menu__list__item
        a(href="#").list__item--link Item 1
      li.menu__list__item
        a(href="#").list__item--link Item 2
      li.menu__list__item
        a(href="#").list__item--link Item 3


.wrap {
  background-color: #eee;
  border-radius: 12px;
  box-shadow: 0 6px 8px -5px rgba(0, 0, 0, 0.5);
  margin: 32px auto;
  padding: 32px 16px;
  width: 80%;
}

.menu {
  width: 100%;
}

.menu__list {
  font-size: 0;
}

.menu__list__item {
  display: inline-block;
  font-size: 16px;
  &::after {
    background-color: orangered;
    content: '';
    display: block;
    height: 2px;
    transition: width 280ms ease-in;
    width: 0;
  }
  &:hover,
  &:focus {
    &::after {
      width: 100%;
    }
  }
}

.list__item--link {
  color: #3E363F;
  display: block;
  font-family: 'Arial', sans-serif;
  padding: 8px;
  text-decoration: none;
}

在完成下一个活动之前完成CSS动画

2 个答案: