TranslateY 正在增加页面的大小答案

【问题标题】：TranslateY is increasing the size of pageTranslateY 正在增加页面的大小
【发布时间】：2022-02-05 22:32:39
【问题描述】：

在容器的第一个孩子中，translateY 属性使元素消失，但是当涉及到最后一个孩子时，它会增加页面的大小并保持在页面上。我希望它消失并给两个孩子带来过渡效果。

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>

【问题讨论】：

溢出：隐藏到正文？

标签： html css css-transforms

【解决方案1】：

只需将overflow : hidden; 样式添加到容器类即可。

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>

【讨论】：