尝试使用transitionend事件而不是setTimeout

Question

我有这段代码：

＆＃13;

＆＃13;

$("#disable").click(function () {
     $("body").append("<div id='blackDisable' class='fade'> </div>");
    setTimeout(function () {
        $("#blackDisable").addClass("showBack");
    }, 150);
});

＆＃13;

.fade {
    opacity: 0;
    transition: opacity .15s linear;
}
        
.showBack {
    opacity: .5;
}

#blackDisable {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2222;
    background-color: black;
}

＆＃13;

<button id="disable">Click Me</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

我不想使用setTimeout来强制转换工作，所以我搜索了一个解决方案并找到transitionend事件并将setTimeout替换为transitionend事件处理程序，但它没有被解雇。

如何删除此setTimeout并使用transitionend事件？

提前致谢并抱歉我的英文！

Answer 1

transitionend与您的问题有关 - 因为没有转换来注册任何结尾。
这是一个立即将类分配给新创建的（尚未发现DOM样式）元素的问题 - without a callback - 其中setTimeout行为实际上就像＆＃ 34; DOM-ready hack ＆＃34;。

没有setTimeout？两种方式（甚至更多）：

1。 animation（而不是transition）

＆＃13;

＆＃13;

$("#disable").click(function() {

  $("body").append("<div id='blackDisable' class='fade'></div>");
  $("#blackDisable").addClass("showBack");
  
});

＆＃13;

.fade {
  opacity: 0;
  /* no transition */
}

.showBack {
  /*opacity: .5; not ready, instead let the browser assign/trigger keyframes */
  animation : fadeIn 0.3s linear forwards;
}

#blackDisable {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2222;
  background-color: black;
}

@keyframes fadeIn {
  to { opacity: 0.5; }
}

＆＃13;

<button id="disable">Click Me</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

2。在任何事件之前附加

并使用CSS visibility来防止重叠问题

＆＃13;

＆＃13;

// Append on DOM ready
$("body").append("<div id='blackDisable' class='fade'></div>");

// CALLBACK
$("#disable").click(function() {
  // Since the callback, it's now discoverable,
  // DOM set, CSS styles are set and we can transition! 
  $("#blackDisable").addClass("showBack");

});

＆＃13;

.fade {
  opacity: 0;
  visibility: hidden; /* you need this!!!!!! */
  transition: opacity .3s linear;
}

.showBack {
  opacity: .5;
  visibility: visible; /* and this!!!!!! */
}

#blackDisable {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2222;
  background-color: black;
}

＆＃13;

<button id="disable">Click Me</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

3。队列

＆＃13;

＆＃13;

$("#disable").click(function() {

  $("body").append("<div id='blackDisable' class='fade'></div>");
  
  // Instead of setTimeout but again mimicking a callback
  $("#blackDisable").delay().queue(function(){
    $(this).addClass("showBack");
  });
  
});

＆＃13;

.fade {
  opacity: 0;
  transition: opacity .3s linear;
}

.showBack {
  opacity: .5;
}

#blackDisable {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2222;
  background-color: black;
}

＆＃13;

<button id="disable">Click Me</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;