Angular ngShowサイドバースライディングアニメーションの問題

Question

トグル可能なサイドバーをアニメーション化して、開いたり閉じたりするようにしています。アニメーションを私が何でもできるようにすることはできません。 ngShow/ngHide要素にアニメーションを適用する方法と混同していると思います。私はここに例を含めました

：https://jsfiddle.net/chiggerchug/m6ahk463/62/

EDIT：リンクの更新を、メニューが閉じる前に一時停止しますが、何のアニメーションが適用されません。

この問題に関するすべてのヘルプをいただければ幸いです

.animate-show-hide.ng-hide { 
    -moz-transition: left 0.5s ease; 
    transition: left 0.5s ease; 
    } 

    .animate-show-hide.ng-hide-remove { 
    -moz-transition: left 0.5s ease; 
    transition: left 0.5s ease; 
    } 

、ありがとう：

はここで切り替えされている要素に適用される私のCSSの例です。

Answer 1

あなたの上記のコードは機能しています。あなたは自分のアニメーションクラス

@keyframes myChange { 
    from { 
     width: 250px; 
    } to { 
     width: 0; 
    } 
} 

.animate-show-hide.ng-hide { 
    animation: 0.5s myChange; 
} 

フィドルを変更する必要があります。https://jsfiddle.net/m6ahk463/64/

フィドル更新：https://jsfiddle.net/m6ahk463/66/