右から左へCSSアニメーションを変換する

Question

私は右から左にメニューをスライドさせるナビゲーションバーで作業しています。 私のコードでは、ユーザーの画像をクリックすると、メニューが表示されます。

これがロードされると、メニューが非表示になり、クリックされたときに表示されます。私はクラスhiddenとshowを追加してメニューに切り替えました。

$(document).ready(function(){ 
    $(".img-profile").click(function(){ 
     $(".menu-wrapper").addClass("show"); 
    }); 
    $(".menu-bg").click(function(){ 
     $(".menu-wrapper").removeClass("show"); 
    }); 
}); 

問題は、私がtransition: all 0.2s linear 0sを追加した場合でも、アニメーションと。また、私はメニュー上でそれをアニメーション化する0

.menu-wrapper > .login-menu{ 
    background-color: #fff; 
    height: 100%; 
    overflow-y: auto; 
    position: fixed; 
    right: 0; 
    width: 250px; 
    z-index: 5; 
    padding: 30px 20px; 
    text-align: center; 
    transition: all 0.2s linear 0s; 
    transform: translateX(0px); 
} 
.menu-wrapper .show > .login-menu{ 
    transform: translateX(250px); 
} 

に250pxから変換していないCSS

.show{ 
    display: inline-block !important; 
} 
.hidden{ 
    display: none; 
    } 

です - 右から左に閉じます。

私の完全なコードは、アニメーションをトリガしません表示CSS属性を変更するJSFIDDLE

Answer 1

です。代わりにvisibility属性を使用します。これはアニメーションをトリガーします。

display（完全に可能）を使用するのが正当な理由がある場合は、表示属性を最初に設定して要素を表示する必要がありますが、非表示にしておきます。直後にvisibility：visible属性を設定すると、アニメーションがトリガされます。

編集：私はあなたのフィドルを見ました。ブートストラップセットは.hidden要素にnone：noneを表示するため、.hiddenクラスは使用しないでください。ショークラスで可視性を表示し、.menu-wrapper要素でvisibility：hiddenを設定するだけで、.showクラスを単独で使用してください。あなたのCSSのすべての表示：なし行を削除しても問題ありません。

Answer 2

このトリックで試してみてください。 NONE`：

<header class="header"> 
<div class="container"> 
    <a class="logo" href="/"></a> 
    <div class="login"> 
     <div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div> 

      <div class="login-menu"> 
       <div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div> 
       <p>Mark Zuckerberg</p> 
       <button type="button" class="btn btn-danger btn-block">Logout</button> 
      </div> 
      <div class="menu-bg"></div> 
     </div> 
    </div> 

.header{ 
    width: 100%; 
    height: 50px; 
    background: #fff; 
    border-bottom: 2px solid #ececec; 
} 
.header > .container{ 
    height: 100%; 
    position: relative; 
} 
.logo { 
    background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center/contain ; 
    display: inline-block; 
    width: 23rem; 
    height: 100%; 
} 
.select-lang { 
    display: inline-block; 
    position: absolute; 
    top: 15px; 
} 
.login{ 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
.img-profile{ 
    background: no-repeat scroll center center/contain; 
    position: relative; 
    top: 3px; 
    border-radius: 40px; 
    width: 40px; 
    height: 40px; 
    display: block; 
    margin: auto; 
} 
.login > .menu-wrapper{ 
    display: none; 
    position: fixed; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    z-index: 5; 
    height: 100%; 
    width: 100%; 
} 
.login-menu{ 
    background-color: #fff; 
    height: 100%; 
    overflow-y: auto; 
    position: fixed; 
    top: 40px; 
    right: -250px; 
    width: 250px; 
    z-index: 5; 
    padding: 30px 20px; 
    text-align: center; 
    transition: all 0.2s linear 0s; 
} 
.show{ 
    right: 0; 
} 
.hidden{ 
    right: -250px; 
    } 
.login-menu > .img-profile { 
    border-radius: 70px; 
    height: 70px; 
    width: 70px; 
} 
.login-menu > p { 
    font-weight: bold; 
    margin: 10px 0 20px; 
} 
.menu-wrapper > .menu-bg{ 
    background-color: rgba(0, 0, 0, 0.6); 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

$(document).ready(function(){ 
    $(".img-profile").click(function(){ 
     $(".login-menu").addClass("show"); 
    }); 
    $(".img-profile").click(function(){ 
     $("body").removeClass("show"); 
    }); 
    }); 

Answer 3

ここhttps://jsfiddle.net/SkiWether/KFmLv/ を見てみましょうこれはあなた `.menu-wrapper`要素は`ディスプレイを使用して隠されているので、これが起こる

$(".myButton").click(function() { 

    // Set the effect type 
    var effect = 'slide'; 

    // Set the options for the effect type chosen 
    var options = { direction: $('.mySelect').val() }; 

    // Set the duration (default: 400 milliseconds) 
    var duration = 500; 

    $('#myDiv').toggle(effect, options, duration); 
});