javascript - 加载页面时的缩放效果无法正常工作

Question

我正在尝试获得一种效果，即在加载页面时放大位于页面中心的 Logo 。我正在使用以下 HTML 和 JS 代码:

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <img id="logo" src="images/logo2.png" style="zoom: 200%; transition: zoom 1s ease-in-out;"/>
</div>

JS

document.addEventListener("load", pageFullyLoaded, true);

function pageFullyLoaded()
{
    var elem = document.getElementById("logo");
    elem.style.zoom = "300%";
}

结果真的很奇怪。

1. 它以正常大小显示 Logo ，
2. 然后它跳在一个 super 放大版本的标志上(> 1000%)，
3. 在过渡期间进一步放大 Logo (比如 1000% 到 1500%)，
4. 跳回到正常的 Logo 大小和位置(这是正确的，这是我想要的最终位置和大小)。

很明显这种技术是行不通的:

1. 开头的跳跃很丑陋，但我认为这只是因为 2) 无论如何都不正确。因为它应该默认以 200% 的缩放值开始(在 div 的样式中定义)，然后 JS 应该使它缩放到 300%。所以应该没有真正可见的跳跃。
2. 我不明白为什么我会在动画开始时得到这个令人难以置信的放大版本的 Logo 。基本上就好像整个图像都填满了屏幕。

关于如何可靠地执行此操作的任何想法，请问？谢谢。

Answer 1

我会像这样只在 CSS 中这样做:

1. 将图像设置为 scaleX 和 scaleY 0(或以其他方式隐藏它)
2. 在 $(window).load 或 $('document').ready 上添加一个带有关键帧动画的类
3. 之后做任何你需要做的事情。

Fiddle

$(window).load(function(){
    $('img.zoom').addClass('element-animation');
});

你也可以像这样收听动画结束事件https://github.com/daneden/animate.css#usage

该库 (Animate.css) 也非常方便，您或许可以在其中找到一些有用的效果。