大型正文的行高动画

Question

我正在为我的企业设计一个网站，我正在拼命地尝试使交互式设计概念发挥作用。

我将我的标志设置为白色，与正文相对照。这是一张图片。我非常喜欢它，我用正文作为整个侧边栏。

现在我一直在尝试将背景文本的行高属性设置为"淡入"白色徽标的动画。

问题是，为了有足够的文本行来突出徽标和侧边栏文本，我必须有一大块文本。

现在，我使用的是大约6700行长的文本。

我已经尝试了两种用于设置线条高度变化动画的基本方法。然而，这种变化总是突然的，而且有点延迟。

1） 我在CSS中为文本添加了一个transition: all语句：

#text {
text-align: right;
font-size: 30%;
height: 100px;
line-height: 7.0 em;
transition: all 500ms ease;

然后我写了一个函数，用一个范围滑块来改变行的高度。滑块可以工作，但没有过渡-线条高度的变化是瞬间的，即使只有一步（0.01em）

2） 我从gsgd.co.uk下载并安装了jQuery easings插件。然后我制作了它，每次点击徽标时文本的行高都会下降。

$(document).ready(function(){
    $("#logo").click(function(){
        $("#text").animate({
        "line-height": "-=0.5em"},
        1000,
        "easeInOutQuad"
        );
    });
});

在尝试之前，我在三行文本上测试了easeInOutBounce。这个轻松的插件起了作用，尽管它并不像我希望的那样光滑。在文字的大墙上，线条高度的变化仍然是瞬间的。事实上，它起缓冲作用；文本将收缩为一行，我会用滑块将其恢复到4米，然后行高将继续收缩（突然爆发），就像它还没有处理所有的点击一样。

所以我认为浏览器已经到了极限（我使用的是Chrome BTW）。不过我真的很喜欢这个主意。

有没有办法让这样的东西发挥作用？如果没有，在浏览器放弃之前，你可以尝试动画化多少文本，有一个已知的阈值吗？

Answer 1

感谢您制作JSFiddle，尽管我们可以完全通过使用带有轻松插件的jQuery来完成，但最好尽可能使用CSS3，所以我有。

更改了CSS：

#text {
text-align: /*justify*/ right;
font-size: 30%;
height: 50px;
line-height: 0.5em;
transition: all 2000ms ease;
}
#text.anime {
    line-height: 5em;
}

更改了Javascript：

$(document).ready(function(){
    $("#logo").click(function(){
        // you can use addClass or toggleClass if you want to toggle it
        //$('#text').addClass('anime');
        $('#text').toggleClass('anime');
    });
});

您可以查看JSFiddle Fork：http://jsfiddle.net/sameersemna/74fg3tn1/1/

希望你得到你想要的：）