animation：切り替え時の遷移

Question

クリックするとトグル遷移を適用するシナリオがあります。ここで

は私のhtmlコードです：

<div ng-class="{'col-xs-6': myVar=='something'}"> 
<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails track by $index"> 
    <div class="panel-heading header-background"> 
     <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" class="stop-watch"></div> 
     <div class="row"> 
      <div class="col-xs-2"><a style="cursor:pointer" class="pull-right">{{candidateInfo.name}}</a></div> 
      <div class="col-xs-offset-9"><a style="cursor:pointer" ng-click="fnVar()" data-toggle="collapse" data-target="{{'#'+toggle}}">{{candidateInfo.name}} resume</a></div> 
     </div> 
    </div> 
</div> 

<div id="{{toggle}}" class="collapse" ng-class="{'col-xs-6': myVar=='something'}"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

私がクリックしたときに私は、遷移ここ

でcol-xs-6クラスを適用する必要があり、私のCSSのコードは次のとおりです。

.col-xs-6 { 
    transition-property: all; 
    transition-duration: .5s; 
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
} 

私は正しく移行していません。私は、それは今も同じである

Answer 1

使用ngAnimate

.col-xs-6.ng-enter { 
    transition-property: all; 
    opacity:0 
    transition-duration: .5s; 
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
} 

.col-xs-6.ng-enter-active { 
    opacity :1 
}