Question

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

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

开始位置将显示标题，然后在父母悬停时显示整个div。

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

所以相反我决定使用顶部和底部，只需翻转auto所在的位置即可进行完整的div显示。（我不想让滑动div与包含div的高度相同）

但是，当我这样做时，过渡并不起作用。我尝试在转换过程中使用top，bottom和all，但结果却相同 - 没有过渡。

有人可以解释一下）为什么这不起作用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%相关）。这具有额外的好处，即能够使用硬件加速（而不是软件）来制作动画。

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

1 个答案: