添加课程

Question

我有这段代码

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;
}

Answer 1

$(".card-3--closed").bind("transitionend webkitTransitionEndoTransitionEnd MSTransitionEnd", function(){ 
    setTimeout(function(){ 

      console.log("you can add delay here")
       $( ".card-3" ).removeClass( "card-3--closed" );

  }, 3000);
 });