图像/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 的动画持续时间更长或更短，您可以在不同的 DIV 上设置单独的过渡属性。

如果您希望与旧版本的 Firefox 和 Safari 向后兼容，您也可以添加浏览器特定的前缀。 -moz-transition: 、 -webkit-transition: ，对于转换也是如此。