Question

我正在尝试获得一种效果，即在页面加载时放大页面中心的徽标。我使用以下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%";
}

结果很奇怪。

以正常大小显示徽标
然后跳过在超级放大版本的徽标上（＆gt; 1000％），
在过渡期间更多地放大徽标（比如说1000％到1500％），
跳回正常的徽标大小和位置（这是正确的，这是我想要的最终位置和大小）。

显然这种技术不起作用：

一开始的跳跃是丑陋的，但我只是认为这是因为2）不正确。因为它应该默认以200％的缩放值开始（在div的样式中定义）然后JS应该将其缩放到300％。所以真的不应该看到跳跃。
我不明白为什么我会在动画开始时获得这个令人难以置信的放大徽标版本。基本上它几乎就像整个图像填满了屏幕一样。

请问如何可靠地做到这一点？谢谢。

Answer 1

如果您要缩放图像，则无需使用缩放或变换等任何内容。只需直接改变宽度，浏览器就会为您缩放图像：

http://jsfiddle.net/C4JZv/

HTML：

<div class="wrapper">
    <img class="tiny" src="http://placehold.it/200x150" />
</div>

CSS：

.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.wrapper img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: width 1s ease-in-out;
    width: 200px;
}

.wrapper img.tiny {
    width: 10px;
}

JS：

document.querySelector('.wrapper img').className = "";

编辑：您在评论中提到您希望使用transform完成此操作。同样，这只是一个缩小图像的情况（使用transform的{{1}}），具有scale属性，然后删除缩小图像的CSS类：

http://jsfiddle.net/C4JZv/1/

HTML＆amp; JS：相同

CSS：大致相同，但有一些更改（加上一堆供应商前缀）：

transition

Answer 2

我会在这样的CSS中这样做：

将图像设置为scaleX和scaleY 0（或以其他方式隐藏）
在$（窗口）.load或$（＆＃39; document＆＃39;）。ready上添加一个带有关键帧动画的类
事后做任何你需要的事。

Fiddle

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

您还可以收听动画结束事件，例如https://github.com/daneden/animate.css#usage

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

加载页面时的缩放效果不会像通缉那样工作

2 个答案: