图像/DIV 动画 + 事件链

Question

我正在努力制作我正在开发的网站所需的动画，我希望这里的人可以提供帮助。情况如下：客户希望网站的索引页面是一个“保险库”，当点击“进入”链接时打开，它需要一个非常具体的设计，我将尝试描述为我是新的，不能发布图片。屏幕被垂直分割，左侧是 DIV-b，右侧是 DIV C。浮动在顶部的是 DIV-A，其中包含圆形图像，或者保险库的锁，如果你愿意的话。

#DIV-B {
position:relative;
top:0px;
width:50%;
float:left;
height:950px;
z-index:2;
background-image:url(../images/vault-bg-left.jpg);
background-position:right;
overflow:hidden;
}

#DIV-C {
position:relative;
top:0px;
width:50%;
float:right;
height:950px;
z-index:2;
background-image:url(../images/vault-bg-right.jpg);
background-position:left;
overflow:hidden;
}

#DIV-A {
position:relative;
top:150px;
margin:0 auto;
z-index:3;
margin:0 auto;
}

我已经将图像分解并且 DIV 已正确对齐；需要发生的是，当单击“进入”链接时（在 DIV-A 中），DIV-A 中的图像（或 DIV 本身）将顺时针旋转 180 度，紧接着 DIV-A 和 DIV B 滑动向左移动，DIV-C 向右滑动，在其下方显示另一个 DIV（我猜是 D）。

我假设 jQuery 动画和 Mootools 链接可能是要走的路，但老实说，这种事情对我来说有点新，所以我希望有人可以帮助我布置它。提前感谢您的帮助！

Answer 1

您可以使用 jQuery 动画手动编写脚本，但这将是很多工作。幸运的是，市场上开始出现值得关注的 HTML5 动画创作工具。

http://labs.adobe.com/technologies/edge/

http://www.sencha.com/products/animator

Answer 2

我会使用 jQuery 和 CSS3 关键帧动画的组合...虽然它在 IE8 及以下版本中不起作用。我没有对此进行测试，但理论上它应该可以工作。让我知道是否需要修改。

.open-lock { transform: rotate(180deg) }
.slide-left { left: -1000px }
.slide-right { right: -1000px }
#DIV-A, #DIV-B, #DIV-C, .open-lock { transition: all 3s ease-in-out }

还有 jQuery

$('#enter-link').click(function(){
    $('#DIV-A').addClass('open-lock');

    setTimeout(function(){
        $('#DIV-B').addClass('slide-left');
        $('#DIV-C').addClass('slide-right');
    },3000)
});

说明：当您单击 ID 为“enter-link”的链接时，会在#DIV-A 中添加一个“open-lock”类，该类将随 CSS 旋转 180 度。这个动画需要 3 秒。同时设置了一个 setTimeout() 函数 3 秒，在旋转完成后立即执行。此函数将类添加到 DIV B 和 C，这将导致它们的相对位置发生变化，从而将它们滑出视口。

如果您希望它们的动画持续更长或更短，您可以在不同的 DIV 上设置单独的过渡属性。

如果您希望向后兼容旧版本的 firefox 和 safari，您也可以添加浏览器特定的前缀。 -moz-transition: , -webkit-transition: 和 transform 一样。