`ng-hide` - アニメーションどのように非表示にジャンプを防止するには？

Question

私はパネルの高さでng-hideを使ってアコーデオンのアニメーションをしようとしています。しかし、私はng-hideが適用されている間にジャンプを見つける。 （最初のタイトルをクリックすると表示され、非表示になります）

この問題を解決するのに手伝ってください。ここ

は私のCSSコードは次のとおりです。

.animate-show{ 
    border:2px solid gray; 
    padding: 10px; 
    background:green; 
} 

.animate-show.ng-hide { 
    transition: all linear 0.5s; 
} 

.animate-show.ng-hide { 
    line-height: 0; 
    padding: 0; 
    height:0; 

} 

Live Demo

Answer 1

あなたは緑のコンテンツdivと.animate-show.ng-hideクラスで、その後のトグルdivの間のマージンを削除する必要があります。あなたはこのクラスに負margin-bottomスタイリングを設定することによってこれを行うことができます。

h1{ 
    background:gray; 
    cursor:pointer; 
} 

.animate-show{ 
    border:2px solid gray; 
    padding: 10px; 
    background:green; 
    overflow:hidden; 
} 

.animate-show.ng-hide-add{ 
    transition: all linear 0.5s; 
} 

.animate-show.ng-hide-remove 
{ 
    transition: all linear 0.5s; 
} 


.animate-show.ng-hide { 
    line-height: 0; 
    padding: 0; 
    height:0; 
    margin-bottom:-21px; 
} 

ここPlunkerです：http://plnkr.co/edit/XQ4p8uE47QxQbDKUiIyi?p=preview