4

我在当前正在构建的网站上有一个登录表单，我也有一个注册表单。当单击“注册”链接时，我想通过将 div 旋转到另一侧来添加一些精美的动画。我希望登录表单位于正面，而注册表单位于背面。我宁愿不使用 javascript，但如果有必要，我会。

感谢您提供任何可能的答案！

4

5 回答 5

17

除了通过添加类来触发动画之外，您可以使用 CSStransition而无需 Javascript 来制作动画。transform: rotateY()

演示：http: //jsfiddle.net/ThinkingStiff/9UMFg/

CSS：

.flip {
    backface-visibility: hidden;
    border: 1px solid black;
    height: 150px;
    position: absolute;
    transform-origin: 50% 50% 0px;
    transition: all 3s;
    width: 300px;    
}

#side-1 {
    transform: rotateY( 0deg );
}

#side-2 {
    transform: rotateY( 180deg );   
}

.flip-side-1 {    
    transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform: rotateY( 180deg ) !important;
}

HTML：

<form id="side-1" class="flip">
    <div>login</div>
    <input id="username" placeholder="enter username" />
    <input id="password" placeholder="enter password" />
    <a id="login" href="#">login</a>
    <a id="signup" href="#">sign up</a>
</form>
<form id="side-2" class="flip">
    <div>signup</div>
    <input id="new-username" placeholder="enter username" />
    <input id="new-password" placeholder="enter password" />
    <input id="new-re-password" placeholder="re-enter password" />
    <a id="create" href="#">create</a>
</form>

脚本：

document.getElementById( 'signup' ).addEventListener( 'click', function( event ) {

    event.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

}, false );
于 2012-01-30T03:01:59.050 回答
2

我现在没有时间编写任何代码，但是一些可能会有所帮助的指针；

1）你需要使用JavaScript，结合CSS，可能还有像jQuery这样的框架，没有必要重新发明轮子，jQuery已经内置了优秀的动画东西。

2) 将动画分解为实际发生的阶段。所以粗略地，阴影出现了，给人的印象是表单从页面上移开，内容淡出，表单宽度动画为 0，然后是新内容淡入的相反过程。

3）已经有很多优秀的DOM操作效果，搜索酷炫的jquery内容切换等，你会发现很多。

于 2012-01-30T02:57:57.223 回答
1

我做了一个你可能可以使用的翻转菜单，它在第一次加载时有点小故障，但我相信它是小问题..

访问jsfiddle

CSS：

.switch-selection
{
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 130px;
height: 22px;
background: #fbfbfb;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
-khtml-border-radius: 3px; /* KHTML */
border-radius: 3px; /* CSS3 */
}
于 2013-11-27T06:31:24.133 回答
0

制作您所描述的动画的唯一方法是操作 DOM。如果不使用 javascript，我想不出很多方法来做到这一点。

使用纯 HTML，您可以为 DIV A 和 B 构建一个相同的模板，然后在两者之间进行 POST 更改，但这不会使华丽的动画像您想要的那样。

于 2012-01-30T02:54:58.733 回答
0

有关适用于所有浏览器的解决方案，请参见此处。原则是。- 将一个 div 放在另一个上。- 在 div 上旋转，使其朝后。- 并在悬停时旋转两个 div，使其具有翻页的效果。

于 2016-03-30T16:37:59.457 回答