Adding delay to diplaying contents after add class

I have this code

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

I want the elements that are part of class 'card-3' to be displayed AFTER the transition happens from class 'card-3--closed' to 'card-3'. So Im basically trying to add a delay to displaying the contents after the animation happens if that makes sense. Not sure how to implement delay in the code above

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

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

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

Related Articles