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

【问题标题】：Show text by sliding up from the bottom of each line通过从每行底部向上滑动来显示文本
【发布时间】：2017-04-30 18:20:18
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

这个网站https://basicagency.com/使用了css动画：

转换：translate3d

, 过渡

更多详情见：CSS3 3D Transforms

【讨论】：