我在重新定位元素时遇到问题，这些元素有时应该有过渡，有时却没有。
这些 Action 单独运行时效果很好，但 View 在组合 Action 中似乎没有中途更新。解决办法是什么？
$(document).ready(function() {
$('#goLeft').on('click',function() {
$('#box').removeClass('soft');
$('#box').css('left','300px');
});
$('#goRight').on('click',function() {
$('#box').addClass('soft');
$('#box').css('left','400px');
});
$('#goLeftAndRight').on('click',function() {
//copy
$('#box').removeClass('soft');
$('#box').css('left','300px');
//Need for timeout?
//copy
$('#box').addClass('soft');
$('#box').css('left','400px');
});
});h2 {
cursor:pointer;
}
#box {
position: fixed;
top:100px;
left:400px;
height:100px;
width:100px;
background-color:#358;
}
#box p {
padding:5px;
color:#fff;
text-align:center;
}
.soft {
transition: all 0.3s ease-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h2 id="goLeft">jump left</h2>
<h2 id="goRight">slide right</h2>
<h2 id="goLeftAndRight">jump left and slide right</h2>
<div id="box"><p>use headers to move</div>
</body>
</html>
最佳答案
有两种方法可以做到这一点 -
1# - 将您的函数与 CSS 动画
$(document).ready(function() {
$('#goLeft').on('click', function() {
$('#box').removeClass('soft left-right');
$('#box').css('left', '300px');
});
$('#goRight').on('click', function() {
$('#box').addClass('soft').removeClass('left-right');
$('#box').css('left', '400px');
});
$('#goLeftAndRight').on('click', function() {
$('#box').addClass('left-right').removeClass('soft');
});
});h2 {
cursor: pointer;
}
#box {
position: fixed;
top: 100px;
left: 400px;
height: 100px;
width: 100px;
background-color: #358;
}
#box p {
padding: 5px;
color: #fff;
text-align: center;
}
.soft {
transition: all 0.3s ease-out;
}
@keyframes leftRight{
0%{left:300px}
100%{left:400px}
}
.left-right{
left:400px
animation: leftRight 0.3s forwards ease-in-out;
-webkit-animation: leftRight 0.3s forwards ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h2 id="goLeft">jump left</h2>
<h2 id="goRight">slide right</h2>
<h2 id="goLeftAndRight">jump left and slide right</h2>
<div id="box">
<p>use headers to move</div>
</body>
</html>2# - 将您的函数与 setTimeout 函数相结合。
$(document).ready(function() {
$('#goLeft').on('click',function() {
$('#box').removeClass('soft');
$('#box').css('left','300px');
});
$('#goRight').on('click',function() {
$('#box').addClass('soft');
$('#box').css('left','400px');
});
$('#goLeftAndRight').on('click',function() {
//copy
$('#box').removeClass('soft');
$('#box').css('left','300px');
setTimeout(function() {
$('#box').addClass('soft');
$('#box').css('left','400px');
}, 300);
});
});h2 {
cursor:pointer;
}
#box {
position: fixed;
top:100px;
left:400px;
height:100px;
width:100px;
background-color:#358;
}
#box p {
padding:5px;
color:#fff;
text-align:center;
}
.soft {
transition: all 0.3s ease-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h2 id="goLeft">jump left</h2>
<h2 id="goRight">slide right</h2>
<h2 id="goLeftAndRight">jump left and slide right</h2>
<div id="box"><p>use headers to move</div>
</body>
</html>关于jquery - 如何在一个 js 事件中启用和禁用 css 转换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45456519/