完成下一個事件之前的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動畫

回答

相關問題