CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Simon
Simon

Reputation: 147

Transition not triggered after animation

I have made a search modal, it is triggered via jQuery which adds the class -open to the main parent div #search-box. My issue is that the #search-box will fade in however the input does not transform. I am not sure why this is happening. Here is a link to the full codepen 

  #search-box {
     display: none;
     position: absolute;
     height: 100%;
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999999999;

     input {
        border-bottom: 2px solid white;
        display: block;
        width: 100%;
        transform: scale3d(0,1,1);
        transform-origin: 0% 50%;
        transition: transform 3s;
     }

     &.-open{
        background: rgba(0, 0, 0, .8);
        display: block;
        animation: fadein .8s;

        input{
           transform: scale3d(1,1,1);
           transition-duration: 10s;
           transition-delay: 2s;
         }
      }
  }

@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

here is the jquery

$('a[href="#search"]').click(function() {
  $("#search-box").addClass("-open");
  setTimeout(function() {
    inputSearch.focus();
  }, 800);
});

$('a[href="#close"]').click(function() {
  $("#search-box").removeClass("-open");
});

Upvotes: 0

Views: 41

Answers (2)

Adrian Roworth
Adrian Roworth

Reputation: 823

Try this: https://codepen.io/adrianroworth/pen/rjPdKj

The reason was that the display: none / display: block were causing the animations not to work properly. I have changed the way that works to use absolute position to position it off-screen while still being visible.

Upvotes: 0

Vincent Orback
Vincent Orback

Reputation: 2397

The reason is that the parent #search-box is switching from display: none to block and css transitions wont trigger on that change. Some solutions would be to have an animation scaling the input element, or hiding the #search-box in another way. Like using height:0; overflow:hidden or visibility: hidden > visibility: visible.

Upvotes: 3

Related Questions