问题描述:

I have a CSS class that is designed to reduce something to 0 width in a nice animated way. It all works apart from the content (text etc) will wrap to the new width as it animates and this looks terrible.

How can I force (in a generic way, hopefully) the containing div to maintain its contents positioning whilst animating the width to 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;

}

网友答案:

You can wrap the .highlightedSubSection in an other element and apply the width animation on the wrapper. You also need to give the .highlightedSubSection a fixed width.

Here is an example (hover the text to see the animation):

.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;
}
<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>
网友答案:

add a div just wraping .closed and give certain height width to a wrapping div, then animate closed.... thats it..

相关阅读:
Top