Transitions when switching from top to bottom position

问题

If there's a better way of doing what I'm about to ask, please let me know, but so far this is the best I could come up with

I want to have a set of divs that contain a sliding div inside of them. The sliding divs would contain content pulled from the latest post. So they might not always be exactly the same height.

The start position would be to have the title showing, then have the whole div show when the parent is hovered over.

The problem I'm having with only using bottom position is that when the screen gets too thin, more than just the title shows up. Using top, I do lose some of the title, but I'm willing to sacrifice that.

So instead I decided to use both top and bottom, and just flip where auto is in order to make the complete div show. (I don't want to have the sliding div to be the same height as the containing div)

When I do this though, the transition doesn't work. I tried using top, bottom, and all in the transition, but it's all the same result - no transition.

Can someone please explain a) Why this isn't working b) what would make it work without going to jQuery.

HTML:

<div class="innerLeftPosts">
    <div class="mainPostHome">
        <div class="postSlideCover">
            <h3>Hello this is a test</h3>
            <p>This is some test content that would go in here and take up some space</p>
        </div>
    </div>
    <div class="secondaryPostHome">
        <div class="postSlideCover">
            <h3>Hello this is a test</h3>
            <p>This is some test content that would go in here and take up some space</p>
        </div>
    </div>
</div>

CSS:

.postSlideCover{
width:calc(100% - 20px);
height:auto;
position:absolute;
    transition:all 0.4s ease-out;
    -webkit-transition:all 0.4s ease-out;
}
.mainPostHome .postSlideCover{
    top:83%;
    bottom:auto;
}

.mainPostHome:hover .postSlideCover{
    top:auto;
    bottom:0;
}

Fiddle for full and visual example: https://jsfiddle.net/60nxpfs8/

回答1:

Here:

.postSlideCover{
    width:calc(100% - 20px);
    height:auto;
    position:absolute;
    transition:all 0.4s ease-out;
    -webkit-transition:all 0.4s ease-out;
    bottom: 0;
}
.mainPostHome .postSlideCover{
    transform: translateY(60%);
}

.mainPostHome:hover .postSlideCover{
    transform: translateY(0);
}

With a JSFiddle

We can use the transform property translateY to use the height of the element as the metric which we move it (100% relates to 100% of the element height). This has the added benefit of being able to use hardware acceleration (as opposed to software) to animate.

来源：https://stackoverflow.com/questions/30925760/transitions-when-switching-from-top-to-bottom-position

标签

css

css3