CSSのアニメーション - パネルの表示と非表示

Question

私はoffcanvas panelと同様の動作をするパネルを作成しようとしています。ただし、私のパネルが私の他のコンテンツをプッシュすることを望んでいません。代わりに、私は自分のパネルを基本的にスライドさせて、上に、そしておそらく私のコンテンツを覆うようにしたい。私はまだ、パネルがコンテナの高さ全体を占めるようにしたい。

これを実装しようとして、私はこれをFiddleに作成しました。その中で、2つのCSSクラスと一緒に「トグル」ボタンがあることに気付くでしょう。これらのクラスは、私が探しているスライドエフェクトを実装することになっています。残念ながら、それは動作しません。現在のところ、私のCSSは次のようになっています：

#side-panel { 
    height:100%; 
    width:250px; 
    background-color:#fff; 
    position:absolute; 
    top:0; 
    right:0; 
} 

.panel-hide { 
    right:250px; 
    -webkit-transition: 0.5s ease; 
    -moz-transition: 0.5s ease; 
    -o-transition: 0.5s ease; 
    transition: 0.5s ease; 
} 

.panel-show { 
    right:0; 
    -webkit-transition: 0.5s ease; 
    -moz-transition: 0.5s ease; 
    -o-transition: 0.5s ease; 
    transition: 0.5s ease; 
} 

私のCSSに問題があるのか​​どうかは分かりません。私の考えでは、私のCSSアニメーションは正しいように見えます。しかし、私は明らかに間違ったことをしています。私はあなたのフィドルを更新した

Answer 1

： https://jsfiddle.net/ns1756ky/2/

1 - あなたのjavascriptのは間違っている、あなたのIDは、サイドパネルサイドパネルではありません。あなたが別のクラス

を追加する前に、あなたのクラスを削除 - IDを使用してCSSセレクタがクラスよりも重要

3を持っているので、

2 - あなたのCSS #sidePanelは{} .panel非表示と.panel-ショーをオーバーライドしています

var currentState = 'show'; 
window.toggle_click = function() { 
    if (currentState === 'show') { 
    $('#side-panel').removeClass('panel-show'); 
    currentState = 'hide'; 
    } else { 
    $('#side-panel').removeClass('panel-hide'); 
    currentState = 'show'; 
    } 
    $('#side-panel').addClass('panel-'+currentState); 
} 



.panel-hide { 
    right:250px !important; 
    -webkit-transition: 0.5s ease !important; 
    -moz-transition: 0.5s ease !important; 
    -o-transition: 0.5s ease !important; 
    transition: 0.5s ease !important; 
} 

.panel-show { 
    right:0 !important; 
    -webkit-transition: 0.5s ease !important; 
    -moz-transition: 0.5s ease !important; 
    -o-transition: 0.5s ease !important; 
    transition: 0.5s ease !important; 
} 

Answer 2

これよりもはるかに少ないコードで試してみてください。既にjQueryに組み込まれている.toggleClass（）関数を使用してください。 jqueryのモバイル@Fiddle

HTML

<div style="height:100%;"> 
    <div id="content-area" style="height:100%;"> 
    <nav class="navbar"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      Hello 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     </div> 
     </div> 
    </nav> 

    <div id="content-wrapper" style="background-color:beige; height:100%;"> 
     <div class="container-fluid" style="height:100%;"> 
     Welcome 
     <br /> 
     <p> 
      This is some paragraph of text. The purpose of this text is to serve as a visual indicator that the panel is sliding on top of the content instead of pushing it around. 
     </p> 
     <br /> 
     <button class="btn btn-mini btn-primary">toggle</button> 
     </div> 
     <div id="side-panel"> 
     <h3>Info</h3> 
     <p> 
      Here are some details that I need to share. This is basically an informational paragraph. The user can show or hide this information when they click the "toggle" button. 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

#side-panel { 
    height: 100%; 
    width: 250px; 
    background-color: #fff; 
    position: absolute; 
    top: 0; 
    right: 0; 
    -webkit-transition: 0.5s ease !important; 
    -moz-transition: 0.5s ease !important; 
    -o-transition: 0.5s ease !important; 
    transition: 0.5s ease !important; 
} 

.panel-hide { 
    right: 250px !important; 
    -webkit-transition: 0.5s ease !important; 
    -moz-transition: 0.5s ease !important; 
    -o-transition: 0.5s ease !important; 
    transition: 0.5s ease !important; 
} 

JS

$("button").click(function() { 
    $("#side-panel").toggleClass("panel-hide") 
})