嘿伙计们看看这个 fiddle :
Fiddle .
现在我在这个 fiddle 中做的是当我点击任何 li 元素时,我有一个数据属性附加到每个 li 元素,Jquery 代码基本上获取特定的 li 元素数据值并将其显示在 div 中,现在我真的很想将 CSS-3 和 Jquery 结合在一起。
使用 CSS-3,每次我点击一个 li,它应该有一个小动画,即下面的动画应该被激活:
@keyframes rotate {
0% {
transform:rotateX(50deg) translateY(-20px);
/*transform: translateX(100px);*/
}
100% {
transform:rotateX(0deg) translateX(0px);
}
}
.animated {
-webkit-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
I.E 动画应该在 li 数据显示之前被激活。
现在我的 Jquery 代码如下:
$(document).ready(function () {
$('ul').on('click', 'li', function () {
$this = $(this);
var _stor = $this.data('says');
$('.testimo').removeClass('animated').html(_stor).addClass('animated');
});
});
现在,我通过询问我的一位高级同事解决了我的问题,他只是说使用 setTimeOut 函数,所以我将我的 Jquery 代码更改为如下内容:
$(document).ready(function () {
$('ul').on('click', 'li', function () {
$this = $(this);
var _stor = $this.data('says');
$('.testimo').removeClass('animated');
setTimeout(function(){
$('.testimo') .html(_stor).addClass('animated');
},100)
});
});
Thsi 以我想要的方式完美运行。但我的问题是为什么这段代码有效?无论如何,setTimeout 与动画有什么关系?我的问题是为什么带有 setTimeout 的代码有效?
这是 setTimeout 的 fiddle .
谢谢。
亚历山大。
最佳答案
还有另一种方法可以得到你想要的:http://jsfiddle.net/5vb9jhq9/4/
$(document).ready(function () {
$('ul').on('click', 'li', function () {
$this = $(this);
var _stor = $this.data('says');
$('.testimo').removeClass('animated').
html(_stor).width($('.testimo').width).
addClass('animated');
});
});
如您所见,此解决方案也能正常工作,但为什么呢?
浏览器看起来不需要更新屏幕或文档,直到它在执行整个功能后真正需要这样做。因此,您可以在浏览器中触发更新,例如,更改大小(宽度、高度等)。
我不知道为什么(可能是浏览器的内部行为)但它在不使用计时器的情况下工作。
最好的问候。
关于javascript - 为什么 setTimeout 激活我的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28719417/