javascript - 使用 jQuery 显示的元素上的 CSS 转换问题

Question

我有一个简单的切换加号，应该会触发一个 div 出现并旋转成一个 X，然后可以单击它来关闭 div。

一切都按计划进行，除了加号的旋转没有平滑过渡，它看起来已经旋转了。

如果我从 #showbox div 中删除 display:none 并删除 $("#showbox").show()，动画/过渡作品。只有当 div 被隐藏然后用 .show() 显示时，它才会旋转而没有动画。

我确定我能想到一个解决方法，我只是想知道是否有人可以解释为什么会发生这种情况

$("#togglebox").click(function() {
  $("#showbox").show();
  $("#showbox .toggleplus").toggleClass("togglex");
});

#showbox {
  background: #000;
  width: 500px;
  height: 200px;
  display: none;
}

.toggleplus {
  width: 30px;
  height: 30px;
  transition: all .5s;
  color:#111;
}

#showbox .toggleplus {
color:#FFF;
}

.togglex {
  transform: rotate(-46deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglebox">
  <p>LEARN MORE</p>
  <div class="toggleplus">+</div>
</div>

<div id="showbox">
  <div class="toggleplus">+</div>
  <p>Blah Blah Blah</p>
</div>

Answer 1

问题是 UI 在与 JavaScript 执行的线程不同的线程中更新，并且 UI 线程的执行速度比 JS 快。

您可以通过添加一个短暂的延迟来解决这个问题，这会强制 UI 在函数完成之前不更新。

$("#togglebox").click(function(){
        $("#showbox").show();
        setTimeout(function(){
          $("#showbox .toggleplus").toggleClass("togglex");
        },20);
    });

#showbox {
    	background:#fff;
    	width:500px;
      height:200px;
    	display:none;
    }
    
    .toggleplus {
    	float:right;
    	width:30px;
    	height:30px;
    	transition:all .5s;
    }
    
    .togglex {
    	transform: rotate(-46deg);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="togglebox">
        <p>LEARN MORE</p>
        <div class="toggleplus"></div>
    </div>
    	
    <div id="showbox">
        <div class="toggleplus">+</div>
        <p>Blah Blah Blah</p>
    </div>

使用 JQuery 实现此目的的另一种方法是将旋转类代码添加为 show() 的回调。 方法:

$("#togglebox").click(function(){
        // Passing a function to the show method sets it up as a callback to
        // be executed after the show() animation is complete.
        $("#showbox").show(function(){
          $("#showbox .toggleplus").toggleClass("togglex");
        });
    });

#showbox {
    	background:#fff;
    	width:500px;
      height:200px;
    	display:none;
    }
    
    .toggleplus {
    	float:right;
    	width:30px;
    	height:30px;
    	transition:all .5s;
    }
    
    .togglex {
    	transform: rotate(-46deg);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="togglebox">
        <p>LEARN MORE</p>
        <div class="toggleplus"></div>
    </div>
    	
    <div id="showbox">
        <div class="toggleplus">+</div>
        <p>Blah Blah Blah</p>
    </div>