AddClass()是否是同步的？ [英] Is addClass() async?

问题描述

它应该删除类transition(因此是css转换属性)，将div移动到200px(立即)，重新应用transitioncss属性，然后将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>

这篇关于AddClass()是否是同步的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！