通过从每行底部向上滑动来显示文本

Question

我正在尝试使用jQuery，并且遇到了一个我想要重新创建的简洁动画。 在网站https://basicagency.com/中，他们通过从每行文本的底部向上滑动来显示文本，以便不移动元素。 jQuery动画SlideDown通过向上移动整个文本块然后向下移动来显示文本，这并不能真正创建该效果。我怎么能这样做？

Answer 1

在jQuery中放大动画。

$('a').click(function() {
    $('#text').slideDown();
});

#container {

    position:relative;
    padding:40px;
}
#text {
    display: none;
    position: absolute;
    bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href='#'>click me</a>
<div id='container'>
<p id="text">Sample Text</p>
</div>

Answer 2

此网站https://basicagency.com/使用css animate by：

转换：translate3d

，过渡

有关详细信息，请参阅：CSS3 3D Transforms