完成下一个事件之前完成CSS动画
[英]Complete CSS animation before doing next event
问题描述
I am trying to fix a CSS transition bug that triggers on hover. 
我正在尝试修复在悬停时触发的CSS过渡错误。 The problem is that if you hover and unhover too fast over the buttons they will bug out completely. 问题是，如果您将鼠标悬停和悬停在按钮上的速度过快，它们将完全出错。
Is there a way to wait for the css animation to finish before it triggers the ´unhover´ animation? 有没有办法在触发“ unhover”动画之前等待css动画完成？
And yes, I checked alot of 'fixes' but this is a bit of a complex one. 是的，我检查了很多“修复”，但这有点复杂。
Check out the website here: http://i280133.iris.fhict.nl/jongens/index.php . 在此处查看网站： http : //i280133.iris.fhict.nl/jongens/index.php 。 It's concerning the menu hover transition. 这与菜单悬停过渡有关。
$(".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>
2 个解决方案
解决方案1
0 2017-02-13 19:15:35
Try to use $.when and deferred.then functions. 尝试使用$ .when和deferred.then函数。 For more information check https://api.jquery.com/jquery.when/ 有关更多信息，请检查https://api.jquery.com/jquery.when/
$.when(processIsDone).then(function(){doTHis});
解决方案2
0 2017-02-13 19:25:32
Check out this example. 看看这个例子。 Seems to do what you want: 似乎可以做您想要的：
http://codepen.io/wired/pen/bwbzWm 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.