位置が固定されていると遷移が動作しません

Question

出力を見るには、コードペインのアイコンをクリックしてください。

私は容器を固定したいと思います。ただし、コンテナが固定されている場合、Xアイコンの遷移は機能しません。メニューボタンをクリックすると、Xアイコンにトランジションがありません。

Xアイコンの効果を確認するには、固定位置のコメントを解除する必要があります。あなたは一時的なコンテナの位置を変更することができ、メニューアイコンをクリック

https://codepen.io/anon/pen/dzxaGb

#container { 
    display: none; 
/* Uncomment the position fixed */ 
/* position: fixed; */ 
    height: 100%; 
    width: 100%; 
    background: blue; 
    z-index: 9999; 
    transition: all 0.2s linear; 
} 

#menu, #close {  
    position: absolute; 
    top: 4%; 
    right: 2%; 
    transition: all 0.3s linear; 
    font-size: 3em; 
} 

#close { 
    opacity: 0; 
} 

Answer 1

。それは最高ではありませんが、それは動作します。

は、このコードを追加

：

menu.onclick = function() { 
    container.style.position = 'static'; 
} 

x.onclick = function() { 
    container.style.position = 'fixed'; 
}