角ng動畫滑塊

我想創建一個使用ng動畫的滑塊。角ng動畫滑塊

滑塊有效。您可以點擊下一個和上一個，獲取下一個和上一個圖像。

但是我想一個過渡添加到正在被隱藏，而新元素原始元素進來的元素。

我不能做到這一點，並想知道如果有人可以發現我要去的地方錯誤。

index.jade文件...

div.gallery(ng-controller="aCtrl")   
    a.slider-prev(href="#" ng-click="prevSlide()") 
    a.slider-next(href="#" ng-click="nextSlide()")  
    ul.gallery 
    li(ng-repeat="image in gallery" class="gallery-animation" ng-swipe-right="prevSlide()" ng-swipe-left="nextSlide()" ng-show="isCurrentSlideIndex($index)")   
     figure 
     img.fluid(ng-src="{{imagePaths}}{{image.URL[0]}}") 
     figcaption.fluid 
      {{image.TITLE[0]}} : {{image.CAPTIONS[0]}} 
    nav.nav 
    div.wrapper 
     ul.dots 
     li.dot(ng-repeat="image in gallery") 
      a(href="#" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index);")

...

controller.js =

App.controller('aCtrl', function (data , imgPath, $scope) { 
    data.get().then(function(d) { 
     $scope.gallery = d.data.PACKAGE.ITEM[4].GALLERY[0].MEDIA; 
     $scope.currentIndex = 0; 
     $scope.setCurrentSlideIndex = function (index) { 
      $scope.currentIndex = index; 
     }; 
     $scope.isCurrentSlideIndex = function (index) { 
      return $scope.currentIndex === index; 
     }; 

     // setting the next and previous controls 
     $scope.prevSlide = function() { 
      $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.gallery.length - 1; 
     }; 
     $scope.nextSlide = function() { 
      $scope.currentIndex = ($scope.currentIndex < $scope.gallery.length - 1) ? ++$scope.currentIndex : 0; 
     }; 


     $scope.imagePaths = imgPath['default']; 
    }) 
});

...

CSS

.gallery-animation { 
    position:absolute; 
    top:0; 
    left:0; 

    opacity:1; 

} 

.gallery-animation.ng-hide-add.ng-hide-add-active { 
    opacity:1; 

    -webkit-transition:1s linear all; 
    -moz-transition:1s linear all; 
    -o-transition:1s linear all; 
    transition:1s linear all; 

    -webkit-transform: rotateX(50deg) rotateY(30deg); 
    -moz-transform: rotateX(50deg) rotateY(30deg); 
    -ms-transform: rotateX(50deg) rotateY(30deg); 
    -o-transform: rotateX(50deg) rotateY(30deg); 
    transform: rotateX(50deg) rotateY(30deg); 

    -webkit-transform-origin: right top 0; 
    -moz-transform-origin: right top 0; 
    -ms-transform-origin: right top 0; 
    -o-transform-origin: right top 0; 
    transform-origin: right top 0; 

} 

.gallery-animation.ng-hide { 
    opacity:0; 
} 

.gallery-animation.ng-hide-remove { 
    -webkit-transition:1s linear all; 
    -moz-transition:1s linear all; 
    -o-transition:1s linear all; 
    transition:1s linear all; 
    display:block!important; 
    opacity:0; 
} 

.gallery-animation, .gallery-animation.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1; 
}

來源

2014-03-12 user3387010

在您的CSS中，您需要添加一個顯示屬性，其中顯示正在轉換的元素的塊值。

像這樣

.gallery-animation.ng-hide-add, .gallery-animation.ng-hide-remove { 
    /* this needs to be here to make it visible during the animation 
    since the .ng-hide class is already on the element rendering 
    it as hidden. */ 
    display:block!important;  

}

裁判：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

來源

2014-03-12 22:41:26 Warren

回答

相關問題