从顶部位置切换到底部位置时的转换

Question

如果有更好的方法来做我要问的问题，请告诉我，但到目前为止这是我能想到的最好的方法

我想要一组 div，其中包含一个滑动 div。滑动 div 将包含从最新帖子中提取的内容。所以它们可能并不总是完全相同的高度。

起始位置是显示标题，然后在父级悬停时显示整个 div。

我只使用底部位置时遇到的问题是，当屏幕变得太薄时，不仅会显示标题。使用top，我确实失去了一些头衔，但我愿意牺牲它。

因此，我决定同时使用顶部和底部，只需翻转 auto 所在的位置即可显示完整的 div。 （我不希望滑动 div 与包含 div 的高度相同）

但是，当我这样做时，过渡不起作用。我尝试在过渡中使用 top、bottom 和 all，但结果都是一样的 - 没有过渡。

有人可以解释一下 a) 为什么这不起作用 b) 如果不使用 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;
}

完整的视觉示例：https://jsfiddle.net/60nxpfs8/

Answer 1

这里：

.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);
}

使用 JSFiddle

我们可以使用transform属性translateY来使用元素的高度作为我们移动它的度量（100%与元素高度的100%相关）。这样做的另一个好处是能够使用硬件加速（而不是软件）来制作动画。