完成下一个事件之前的CSS动画

我正在尝试修复触发悬停的CSS转换错误。问题是，如果你将鼠标悬停在按钮上并且速度太快，它们会完全错误。完成下一个事件之前的CSS动画

有没有办法等待css动画完成，然后触发'unhover'动画？

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

看看这里的网站：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>

来源

2017-02-13 Jordy Senssen

你可以尝试简单地与动画的时间..这可能做的伎俩一个setTimeout的运行删除类。 –

@ fadeys.work我试过了，但是这并不能阻止'unhover'或下一个悬停动画的发生。 –

可能还有一些其他问题。首先你必须使用[debouncing]（https://davidwalsh.name/javascript-debounce-function）来防止事件多次注册。还尝试使用JS库，通过动画[GSAP]（https://greensock.com/gsap） –

尝试使用$。当和deferred.then功能。欲了解更多信息，请查看https://api.jquery.com/jquery.when/

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

来源

2017-02-13 19:15:35

查看本示例。似乎做你想要什么：

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; 
}

来源

2017-02-13 19:25:32

完成下一个事件之前的CSS动画

回答

相关问题