CSS遷移タイミングでのjQueryオペレーション

Question

私は、marginプロパティでサイドバーアニメーションを作成しようとしています。サイドバーにHTML属性hiddenを切り替えてアクセス可能にしています。

私の質問は、なぜ、サイドバーを表示するアニメーションが1回目の試行後に壊れてしまうのですか？私がaddClassに任意のタイムアウトを追加するとそれは後続の試行で動作しますが、removeAttrは同期していないと思われますか？

Run in JSBin

HTML

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="main"></div> 
</div> 

CSS

#sidebar { 
    margin-left: -200px; 
    transition: margin 0.3s ease-out; 
} 

#wrapper.show-aside #sidebar { 
    margin-left: 0; 
} 

JS

// Show sidebar 
$('#sidebar').removeAttr('hidden'); 
$('#wrapper').addClass('show-sidebar'); 

// Hide sidebar 
$('#wrapper').removeClass('show-sidebar'); 
setTimeout(function() { 
    $('#sidebar').attr('hidden', 'hidden'); 
}, 300); // Wait for CSS transition to finish 

Answer 1

あなたはhidden HTML属性を追加すると、それはを追加を要素に追加します。 CSSトランジションはdisplayプロパティをアニメーション化しないため、鈍い表示/非表示エフェクトが作成されます。

私はあなたがそれを維持する上で主張すればあなたはので（クラスを追加するためのsetTimeoutを追加する必要があり、とにかく

（MDNをお読みください）hidden属性は、このシナリオのための正しい使用方法であればわかりませんそれは、クラスのアニメーションの終了後に隠されているためのattrを除去するために再びhiddenのattrが除去された後である）と：

$('#show').on("click", function(){ 
 
    $('#sidebar').removeAttr('hidden'); 
 
    setTimeout(function() { $('#wrapper').addClass('show-sidebar'); },310); 
 
}); 
 

 
$('#hide').on("click", function(){ 
 
\t $('#wrapper').removeClass('show-sidebar'); 
 
    setTimeout(function() { $('#sidebar').attr('hidden', true); },310); 
 
});

#wrapper { 
 
    width: 400px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#sidebar { 
 
    width: 200px; 
 
    height: 100%; 
 
    left: -100%; 
 
    background-color: red; 
 
    position: absolute; 
 
    transition: left 0.3s ease-out; 
 
} 
 

 
#wrapper.show-sidebar #sidebar { left: 0; } 
 

 
#main { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="sidebar"></div> 
 
    <div id="main"></div> 
 
</div> 
 

 
<br/> 
 
<button id="show">Show sidebar</button> 
 
<button id="hide">Hide sidebar</button>

jsFiddle：あなたが表示/非表示にされないように、https://jsfiddle.net/azizn/s9ax6gm5/

Answer 2

が私の最初の質問に答えていませんが、簡単な回避策は、別の容器内にサイドバーをラップし、子供にhidden属性を設定することですコンテナ、内容だけ。

JSBin：http://jsbin.com/gulixegoha/1/edit?html,css,js,output

<div id="wrapper"> 
    <div id="sidebarWrapper"> 
    <div id="sidebar">Some content some content some content</div> 
    </div> 
    <div id="main"></div> 
</div> 

-

#sidebarWrapper { 
    margin-left: -200px; 
    transition: margin 0.3s ease-out; 
} 

#wrapper.show-aside #sidebarWrapper { 
    margin-left: 0; 
} 

-

$('#show').click(function() { 
    $('#sidebar').removeAttr('hidden'); 
    $('#wrapper').addClass('show-sidebar'); 
}); 

$('#hide').click(function() { 
    $('#wrapper').removeClass('show-sidebar'); 

    setTimeout(function() { 
    $('#sidebar').attr('hidden', 'hidden'); 
    }, 300); // Wait for CSS transition to finish 
});