求助 怎么加入动画效果在angularjs写的code里面实现？

    <div class="img-wrap">    
    <img class="img img-circle img-thumbnail center-block" ng-src="{{product.images[gallery.current]}}" />  
    </div>  
    <ul class="clearfix">    
    <li class="small-image pull-left thumbnail sample-show-hide" ng-repeat="image in product.images track by $index" ng-click="gallery.setCurrent($index)">      
    <img ng-src="{{image}}" />    
    </li>
    </ul>

  <style>    
/* The starting CSS styles for the enter animation */   
.img-wrap.ng-enter {      
transition:0.5s linear all;      
opacity:0;    
}    
/* The finishing CSS styles for the enter animation */   
.img-wrap.ng-enter.ng-enter-active {      
opacity:1;    
}
</style>

   <script>     
   app.directive('productGallery', function() {          
                            return {           
                                          restrict: 'E',            
                                          templateUrl: '/views/product-gallery.html',              
                                          controller: function() {              
                                          this.current = 0;             
                                          this.setCurrent = function(imageNumber){                
                                          this.current = imageNumber || 0;              
                                          };            
                                          },            
                                         controllerAs: 'gallery'          
                                         };        
                                         });      
                                         })();
   </script>

代码大致是这样的
我想加入动画当你点击小图的时候大图就会变成你的点的那个图，但是我想加入动画比如变化的时候是渐变的效果，可是我加入css文件也不能有效果请问有大神会修改吗？但是点击换图是可以有的。。用的是AgularJS所有不太会弄动画
拜托大家了