高さのCSSトランジションが動作しない

Question

ボタンをクリックすると拡大するdivの高さの変化をアニメーション化したいと思います。ボタンをクリックしたときにビデオプレーヤーが表示されるようになっていますが、アニメーションがスムーズではありません。ここの助けは本当に感謝します、ありがとう。

LINK TO PAGE

$(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="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>

Answer 1

あなたがdisplay: noneを使用しているので、overflowが表示されますが、映像が隠されているからです。 displayプロパティを切り替えると、ビデオがすぐに表示されます。

overflow: hiddenを.video__playerに追加するだけですが、私はdisplayをトグルする必要はありません。

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

Answer 2

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

Answer 3

アニメーションが表示されている項目に対しては表示されません（）方法あなたはjQueryの.fadeInを使用することができます：なし。 アニメーションを表示する場合は、タイムアウトを設定する必要があります。このコードのように：

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