CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JSON_Derulo
JSON_Derulo

Reputation: 992

CSS transition change in height not working

I would like to animate the change in height for a div that expands when clicking on a button. I have got the video player to appear when the button is clicked, but the animation is not smooth. Any help here would be really appreciated, thanks.

$(document).ready(function(){
    $(".video" ).click(function() {
        $(".video__player").addClass("expanded");
        document.getElementById("video__player").style.maxHeight = "45vw";
    });
});
.video__player {display: none; width: 80vw; max-width: 560px; max-height: 0; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}
iframe {width: 100%; height: 100%;}
.expanded {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
                            <a class="h6 video clickable">Watch the video <img class="play-btn" src=""></a>
                        </div>
                        <div class="video__player" id="video__player">
                            <br><br>
                            <iframe src="" frameborder="0" allowfullscreen></iframe>
                        </div>

Upvotes: 1

Views: 333

Answers (3)

farbod
farbod

Reputation: 91

animation is not show for items with display: none. if you want show animation, should put timeout. like this code:

setTimeout(function(){
    document.getElementById("video__player").style.maxHeight = "45vw";
}, 10)

Upvotes: 0

Nimish
Nimish

Reputation: 1016

You can use jQuery .fadeIn() method

$(document).ready(function() {
  $(".video").click(function() {
    $('.video__player').fadeIn(500, function() {
      $(".video__player").addClass("expanded");
      document.getElementById("video__player").style.maxHeight = "45vw";
    });
  });
});
.video__player {
  display: none;
  width: 80vw;
  max-width: 560px;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
  -webkit-transition: max-height 0.5s ease-in-out;
  margin: auto;
}

iframe {
  width: 100%;
  height: 100%;
}

.expanded {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
  <a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player" id="video__player">
  <br><br>
  <iframe src="https://www.youtube.com/embed/SIaFtAKnqBU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

It's because overflow is visible, but the video is hidden because you're using display: none. When you toggle the display property, the video shows immediately.

All you really need to do is add overflow: hidden to .video__player, but I wouldn't toggle display as it isn't necessary.

$(document).ready(function(){
    $(".video" ).click(function() {
        document.getElementById("video__player").style.maxHeight = "45vw";
    });
});
.video__player {overflow: hidden; width: 80vw; max-width: 560px; max-height: 0; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}
iframe {width: 100%; height: 100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
                            <a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
                        </div>
                        <div class="video__player" id="video__player">
                            <br><br>
                            <iframe src="https://www.youtube.com/embed/SIaFtAKnqBU?autoplay=1" frameborder="0" allowfullscreen></iframe>
                        </div>

Upvotes: 1

Related Questions