动画：切换时转换

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 
}