AddClass()是否是同步的?
它应该删除类transition
(因此是css转换属性),将div移动到200px(立即),重新应用transition
css属性,然后将div向右动画(用1秒钟)。相反,它被冻结了。
css left
属性需要更多时间才能按类删除transition
?或者addClass()
是不同步的?
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
var elem = $('#elem');
elem.removeClass('transition');
elem.css('left', 200);
elem.addClass('transition');
elem.css('left', 0);
#container {
position: relative;
width: 400px;
height: 200px;
background-color: red;
}
#elem {
width: 50px;
height: 50px;
position: relative;
left: 0;
top: 0;
background-color: blue;
}
.transition.linear.scritta {
-webkit-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;
-ms-transition: all 1.0s linear;
-o-transition: all 1.0s linear;
transition: all 1.0s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="elem" class="transition linear scritta"></div>
</div>
解决方案
否,addClass
同步。您可以查看source code:
addClass: function( value ) {
var classes, elem, cur, curValue, clazz, j, finalValue,
i = 0;
if ( jQuery.isFunction( value ) ) {
return this.each( function( j ) {
jQuery( this ).addClass( value.call( this, j, getClass( this ) ) );
} );
}
if ( typeof value === "string" && value ) {
classes = value.match( rnothtmlwhite ) || [];
while ( ( elem = this[ i++ ] ) ) {
curValue = getClass( elem );
cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " );
if ( cur ) {
j = 0;
while ( ( clazz = classes[ j++ ] ) ) {
if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
cur += clazz + " ";
}
}
// Only assign if different to avoid unneeded rendering.
finalValue = stripAndCollapse( cur );
if ( curValue !== finalValue ) {
elem.setAttribute( "class", finalValue );
}
}
}
}
return this;
}
如果您使用原生API而不是jQuery,您将看到相同的结果。
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">var elem = document.getElementById('elem');
elem.classList.remove('transition');
elem.style.left = '200px';
elem.classList.add('transition');
elem.style.left = '0px';
#container {
position: relative;
width: 400px;
height: 200px;
background-color: red;
}
#elem {
width: 50px;
height: 50px;
position: relative;
left: 0;
top: 0;
background-color: blue;
}
.transition.linear.scritta {
-webkit-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;
-ms-transition: all 1.0s linear;
-o-transition: all 1.0s linear;
transition: all 1.0s linear;
}
<div id="container">
<div id="elem" class="transition linear scritta"></div>
</div>
浏览器似乎不会在您更改CSS样式时直接更新文档。这可能会产生绘画和重新布局以及昂贵的操作,如果您要更改更多样式,这些操作将毫无用处。
所以它们会等待一段时间,让您更改更多样式,然后它们会同时更新所有样式。
作为解决方案,您可以尝试使用异步代码:
requestAnimationFrame(function() {
elem.style.left = '0px';
});
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
var elem = document.getElementById('elem');
elem.classList.remove('transition');
elem.style.left = '200px';
elem.classList.add('transition');
requestAnimationFrame(function() {
elem.style.left = '0px';
});
#container {
position: relative;
width: 400px;
height: 200px;
background-color: red;
}
#elem {
width: 50px;
height: 50px;
position: relative;
left: 0;
top: 0;
background-color: blue;
}
.transition.linear.scritta {
-webkit-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;
-ms-transition: all 1.0s linear;
-o-transition: all 1.0s linear;
transition: all 1.0s linear;
}
<div id="container">
<div id="elem" class="transition linear scritta"></div>
</div>
使用getComputedStyle
强制更新似乎也有效。
getComputedStyle(elem).transitionDuration; // force update
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
var elem = document.getElementById('elem');
elem.classList.remove('transition');
elem.style.left = '200px';
elem.classList.add('transition');
getComputedStyle(elem).transitionDuration; // force update
elem.style.left = '0px';
#container {
position: relative;
width: 400px;
height: 200px;
background-color: red;
}
#elem {
width: 50px;
height: 50px;
position: relative;
left: 0;
top: 0;
background-color: blue;
}
.transition.linear.scritta {
-webkit-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;
-ms-transition: all 1.0s linear;
-o-transition: all 1.0s linear;
transition: all 1.0s linear;
}
<div id="container">
<div id="elem" class="transition linear scritta"></div>
</div>
相关文章