Feature Request: SlideBox css3 custom animations

[andycaramba]

Is it possible to use built-in SlideBox component to using custom css3 animations like on this demo - http://tympanus.net/Development/PageTransitions/ ? Preferably with the ability to specify different animations for different slide directions. Or maybe there are some fairly simple way to do this with minimal effort?

[CoenWarmer]

This would be fantastic to have. I wonder if it would be difficult to take this and make sure the ionic touch system plays nice with it.

[mhartington]

Moving feature requests from GH Issues to Trello. Please continue the discussion and vote for this and other issues that are important to you

https://trello.com/b/nNk2Yq1k/ionic-framework

[roman-rr]

Still not resolved ?

Just simple slider with fade animation :

.home-slider {
      position:relative;
      width:100%;
      height:64%;
      z-index:0;
      border-bottom: 2px solid #27AB27;
    }
    .slider-slide {
      background-size: 100% !important;
      position: absolute;
      opacity: 0;
      -webkit-transition: all 0.8s !important;
                       -moz-transition: all 0.8s !important;
                        -ms-transition: all 0.8s !important;
                         -o-transition: all 0.8s !important;
                            transition: all 0.8s !important;

      &.active {
        opacity: 1;
      }
    } 

<div class="home-slider" ng-init="startMySlider();sliderHasInit = true;">
      <div class="slider-slide"
        ng-class="{'active':currentSlide==$index}"
        ng-repeat="background in $root.aboutInfo.bg_image_url track by $index"
        ng-style="{'background':'url({{background}}) no-repeat'}">
      </div>
</div>

$scope.currentSlide = 0;
$scope.countSlides: $rootScope.aboutInfo.bg_image_url.length;
$scope.sliderTimer: undefined;
$scope.sliderHasInit: false;
...
startMySlider: function (){
        //If function has initialized
        if($scope.sliderInit) return;

        //Timeout for render HTML and control elements by classes
        $timeout(function(){
          var currentHtmlSlides = document.getElementsByClassName('slider-slide');
          for (var i = 0; i < $scope.countSlides; i++) {
            //order slides by index
            currentHtmlSlides[i].style.zIndex = i;              
          }
          //current slide with max z-index
          currentHtmlSlides[$scope.currentSlide].style.zIndex = $scope.countSlides;

            //Timer fo 8 sec. Add 1 to current slide and repeat function.
            $scope.sliderTimer = setTimeout(function(){   
              if ($scope.currentSlide < $scope.countSlides-1) {
                $scope.currentSlide++;
              } else {
                $scope.currentSlide = 0;
              }
              $scope.startMySlider();
            },8000);

        },50);
 }

Then i think possible to render transparent ion-slide-box, and set to onChangeSlide dedicated functions. But fade background slider with timer enough for me.