Question

我正在尝试使用ng animate创建一个滑块。

滑块有效。您可以单击下一个和上一个，然后获取下一个和上一个图像。

但是我想在新元素进入时向原始元素添加元素的转换。

我无法做到这一点，并想知道是否有人能够发现我出错的地方。

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;
}

Answer 1

在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

角度动画滑块

1 个答案: