Question

我想为单击按钮时扩展的div的高度变化设置动画。我点击按钮时会出现视频播放器，但动画不流畅。这里的任何帮助都会非常感谢，谢谢。

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

这是因为overflow可见，但视频已被隐藏，因为您正在使用display: none。当您切换display属性时，视频会立即显示。

您真正需要做的就是将overflow: hidden添加到.video__player，但我不会切换display，因为它不是必需的。

＆＃13;

$(document).ready(function(){
    $(".video" ).click(function() {
        document.getElementById("video__player").style.maxHeight = "45vw";
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于带有display：none的项目，不显示

动画。如果你想要显示动画，应该把超时。喜欢这段代码：

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

CSS转换高度变化不起作用

2 个答案: