Question

我有一个CSS类，旨在以一种很好的动画方式将某些东西减少到0宽度。这一切都与内容（文本等）的工作区分开来，因为它会动画并且看起来很糟糕。

如何强制（以通用方式，希望）包含div来维持其内容定位，同时将宽度设置为0？

.highlightedSubSection.closed {
    overflow:hidden;
    width: 0%;
    height: 0%; /* this is only here to stop text contents pushing height down as width hits 0 */
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

Answer 1

您可以将.highlightedSubSection包装在其他元素中，并在包装器上应用宽度动画。您还需要为.highlightedSubSection提供固定的宽度。

这是 example （将鼠标悬停在文字上以查看动画）：

＆＃13;

.wrap p {
    width:880px;
    background:teal;
    color:#fff;
    padding:10px;
}
.wrap{
    width:900px;
    transition: width .5s ease-in-out;
    overflow:hidden;
}
.wrap:hover{
    width:0;
}

＆＃13;

<div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id libero sed nulla vestibulum eleifend. Fusce mauris dui, dignissim ut sagittis ut, fringilla id nisi. Integer ex erat, fermentum ac accumsan sit amet, iaculis sed urna. Aenean pharetra maximus sapien id rhoncus. Duis vel mauris nec ligula sodales faucibus. Integer varius, erat in lobortis sollicitudin, lectus mauris elementum tortor, tincidunt elementum quam nunc sed urna. Nunc sed ante tempor, commodo eros vitae, pharetra sapien. Integer tortor tellus, elementum ac dapibus eu, gravida et libero. Maecenas convallis augue turpis, sit amet sollicitudin nunc pretium faucibus. Maecenas commodo, sem quis pretium lobortis, diam augue facilisis arcu, vitae volutpat massa turpis vitae nibh.</p>
</div>

＆＃13;

Answer 2

添加一个div只是包装.closed并给包装div赋予一定的高度宽度，然后动画关闭......就是这样......

在保持内容定位的同时动画为零

2 个答案: