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で同じテンプレートを作成し、2つの間でPOSTを変更できますが、これでは、希望するような派手なアニメーションは作成されません。

于 2012-01-30T02:54:58.733 に答える
0

すべてのブラウザで機能するソリューションについては、こちらをご覧ください。原則はです。-あるdivを別のdivに配置します。-divを回転させて、後ろを向くようにします。-そして、ホバーで両方のdivを回転させて、ページをめくる効果が得られるようにします。

于 2016-03-30T16:37:59.457 に答える