小编Ale*_*exM的帖子

我希望我能够很好地描述这一点,如果它有点长,我道歉但我想描述一下.这是我正在处理的网站上的问题的简化版本:

我在内部div中有一个内部div-内部div的高度不是静态的,有时它的高度是'x'像素,而另一个'y'.外部div是一个带溢出的固定高度:隐藏内部div的重叠,在所有情况下,内部div的高度大于外部div.

我的问题是我需要设置内部div的动画来上下滑动内部div的整个高度,以便所有它都显示在外部div中.你可以看到我尝试在这里使用百分比的动画(33%是任意的):

http://jsfiddle.net/FLMp8/301/

var stuff = $('#inner1, #inner2');

function runIt() {
    stuff.animate({
        top: '-=33%'
    }, 3000);
    stuff.animate({
        top: '+=33%'
    }, 3000, runIt);
}

runIt();

然而,无论高度如何,我似乎无法使其均匀地工作.有什么建议？谢谢.

我一生都无法弄清楚为什么这没有触发，因为这是一件相当简单的事情。我有一个 Angular 组件，仅包含以下内容：

<a href="#services">Click</a>

在相应组件的CSS中，我有这样的：

@keyframes bounce{
    0% { transform: translateY(0px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0px); }
}
a{
    font-size: 3rem;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.2s;
    animation: bounce 1.5s infinite;
}

使用 Chrome 开发工具，我可以看到它在样式标签中输出以下内容：

@-webkit-keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); …