TranslateY 正在增加页面的大小

Question

在容器的 first-child 中，translateY 属性使元素消失，但当它到达最后 child 时，它会增加页面的大小并停留在页面上。我希望它消失并在 child 上提供过渡效果。

body{
    height: 100vh;
}
.container{
    height: 100vh;
    width: 100vw;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.container > :first-child{
    transform: translateY(-200px);
}

.container > :last-child{
    transform: translateY(200px);
}

<body>
    <div class="container">
        <p>Abc</p>
        <p>Xyz</p>
        <p>Abc</p>
    </div>
</body>

Answer 1

只需将 overflow : hidden; 样式添加到容器 class。

body{
    height: 100vh;
}
.container{
    height: 100vh;
    width: 100vw;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    overflow:hidden;

}
.container > :first-child{
    transform: translateY(-200px);
}

.container > :last-child{
    transform: translateY(200px);
}

<body>
    <div class="container">
        <p>Abc</p>
        <p>Xyz</p>
        <p>Abc</p>
    </div>
</body>

TranslateY 正在增加页面的大小

TranslateY is increasing the size of page

html

css

css-transforms