在添加类之后，为DIPLAY内容添加延迟

Adding delay to diplaying contents after add class

本文关键字：添加 延迟 DIPLAY 之后      更新时间：2024-02-26

我有这个代码

function handleButtonClick(){
  var bubbleClick = document.querySelector('.card-3--closed').addEventListener("click", bubbleFunction);
  function bubbleFunction() {
      $( ".card-3--closed" ).addClass( "card-3" );
      $( ".card-3" ).removeClass( "card-3--closed" );
  }
};

我希望类"card-3"中的元素在从类"card-3--closed"转换到"card-3'之后显示。所以我基本上是想在动画发生后增加一个延迟来显示内容，如果这有意义的话。不确定如何在以上的代码中实现延迟

  <div class="box card-3--closed">
            <section class="content content-display">
                <h1>Register</h1>
                <span class="input">
                    <input class="input__field input__field_open" type="text" id="input-4" />
                    <label class="input__label input__label_open input__label-color-1 input__field_open" for="input-4">
                        <span class="input__label-content input__label-content">username</span>
                    </label>
                </span>
                <span class="input">
                    <input class="input__field input__field_open" type="password" id="input-5" />
                    <label class="input__label input__label_open input__label-color-1 input__field_open" for="input-5">
                        <span class="input__label-content input__label-content">password</span>
                    </label>
                </span>
                <span class="input">
                    <input class="input__field input__field_open" type="password" id="input-5" />
                    <label class="input__label input__label_open input__label-color-1 input__field_open" for="input-5">
                        <span class="input__label-content input__label-content">Repeat Password</span>
                    </label>
                </span>
                    <button class="progress-button progress-button_open" data-style="fill" data-horizontal>NEXT</button>
                </span>
            </section>
  </div>

和css

.card-3 {
  display: block;
  top: 3em;
  left: 33.5%;
  /*left: 17%;*/
  background: #ED2553;
  -webkit-box-shadow: 0px 2px 27px -8px rgba(85,85,85,1);
  -moz-box-shadow: 0px 2px 27px -8px rgba(85,85,85,1);
  box-shadow: 0px 2px 27px -8px rgba(85,85,85,1);
  -ms-transform: scale(1,1); /* IE 9 */
  -webkit-transform: scale(1,1); /* Safari */
  transform: scale(1,1); /* Standard syntax */
  transition: 0.6s;
}
.card-3--closed {
  width: 2em;
  height: 2em;
  top: 8em;
  left: 65%;
  background: #ED2553;
  border-radius: 100%;
}
.card-3--closed section {
  visibility: hidden;
  transition: .5s;
}
.card-3 section {
  transition-delay: 0.5s;
  visibility: visible;
}

要在Javascript中添加延迟，可以使用window.setTimeout（）（在大多数情况下，"window."是可选的）。作为第一个参数传递给setTimeout的回调函数将在以毫秒为单位作为第二个参数传递的超时后执行。

$( ".card-3--closed" ).addClass( "card-3" );
window.setTimeout(
    function(){
        $( ".card-3" ).removeClass( "card-3--closed" );
    },
    600
);

我还想知道是否会有不止一个元素具有类card-3——closed或card-3，因为它是一个类而不是ID。如果是这样的话，你只需要处理被点击的那个。

$(".card-3--closed").bind("transitionend webkitTransitionEndoTransitionEnd MSTransitionEnd", function(){ 
    setTimeout(function(){ 
      console.log("you can add delay here")
       $( ".card-3" ).removeClass( "card-3--closed" );
  }, 3000);
 });
相关文章：