仅使用 css 关注子按钮时无法设置动画 div

Question

我一直遇到一个问题，当我点击一个按钮时，它在聚焦时动画效果非常好，但是当父 div 应该动画时，它只是跳跃而不是平滑地动画，即使我增加了 2s 的轻松度。无论我尝试什么，无论我将 .Banner 的代码更改为 .MenuButton:focus > .Banner 还是其他任何东西，它仍然不起作用...任何帮助将不胜感激！

css如下：

/* CSS Document */
div {
    font-family: muli, "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

body {
    margin: 0px;
    padding: 0px;
}

#title {
    color: white;
    margin-left: 50px;
    margin-top: 25px;
    margin-bottom: 10px;
    display: inline-block;
}

.MenuButton {
    float: right;
    height: 60px;
    width: 60px;
    left: calc(100% - 85px);
    top: 10px;
    background: #7eefd8;
    border-color: #43b9bd;
    border-width: 5px;
    border-radius: 50px;
    transition: all 2s ease;
    display: inline-block;
    position: absolute;
}

.MenuButton:focus {
    border-width: 0px;
    border-radius: 50px;
    height: calc(100vh - 100px);
    width: calc(100vw - 50px);
    left: 25px;
    top: 75px;
    
    transition: all 2s ease;
}

.TopBackground {
    background-color: #ffffff;
    width: 100%;
    height: 85vh;
    position: fixed;
}

.Banner {
    background-color: #000000;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-bottom: 10px;
    width: 100%;
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    transition: all 2s ease;
}

.Banner:focus-within {
    height: 100vh;
    transition: all 2s ease;
}

和html如下：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="Theme.css">
<script src="MainPage.js"></script>
</head>
    <div class="TopBackground">
        <div class="Banner">
            <h1 id="title">BannerTest</h1>
            <button id="menu" class="MenuButton"></button>
        </div>
        <div class="Test"></div>
    </div>
<body></body>

Answer 1

当你进行转换时，有一个 before-transition 状态和 after-transition 状态。您之前的过渡状态 .Banner 没有固定的高度值。您必须指定确切的高度而不是自动或将其留空，因为浏览器不会如何从 A 点：height auto 过渡到 B 点：height 100vh

仅使用 css 关注子按钮时无法设置动画 div

Can't animate div when focusing on child button using css only

html

css

css-animations