Using ui-router with view transitions

Question

I'm using ui-router and I'm trying to get view transitions to work i.e. animate on view change. What I have tried is below, but I don't see ny animation on view change, why?

HTML:

Loading...

Relevant part of my js:

// Initialize the main module
app.run(['$rootScope', '$location', '$window', function ($rootScope, $location, $window) {

    'use strict';

    /**
     * Helper method for main page transitions. Useful for specifying a new page partial and an arbitrary transition.
     * @param  {String} path               The root-relative url for the new route
     * @param  {String} pageAnimationClass A classname defining the desired page transition
     */
    $rootScope.go = function (path, pageAnimationClass) {


        if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
            $rootScope.pageAnimationClass = 'crossFade';
        }

        else { // Use the specified animation
            $rootScope.pageAnimationClass = pageAnimationClass;
        }

        if (path === 'back') { // Allow a 'back' keyword to go to previous page
            $window.history.back();
        }

        else { // Go to the specified path
            $location.path(path);
        }
    };
}]);

app.config(function ($stateProvider, $urlRouterProvider, RestangularProvider) {
    // For any unmatched url, send to /route1
    $urlRouterProvider.otherwise("/");
    $stateProvider
        .state('index', {

            url: "/",
            templateUrl: "/static/html/partials/test1.html",
            controller: "TestList"
        })

        .state('test', {

            url: "/test",
            templateUrl: "/static/html/partials/test.html",
            controller: "TestCtrl"
        })



})

CSS:

/* Transitions */

/* Default Enter/Leave */
.ng-enter,
.ng-leave {
    transition-timing-function: ease;
    transition-duration: 250ms;
    transition-property: opacity;
}

.ng-enter {
    opacity: 0;
}

.ng-enter.ng-enter-active {
    opacity: 1;
}

.ng-leave {
    opacity: 1;
}

.ng-leave.ng-leave-active {
    opacity: 0;
}

/* crossFade */
.crossFade.ng-enter {
    transition-duration: 100ms;
    opacity: 0;
}

.crossFade.ng-enter.ng-enter-active {
    opacity: 1;
}

.crossFade.ng-leave {
    transition-duration: 100ms;
    opacity: 1;
}

.crossFade.ng-leave.ng-leave-active {
    opacity: 0;
}

/* slideRight */
.slideRight {
    opacity: 1 !important;
}

.slideRight.ng-enter {
    transition-property: none;
    transform: translate3d(-100%,0,0);
}

.slideRight.ng-enter.ng-enter-active {
    transition-property: all;
    transform: translate3d(0,0,0);
}

.slideRight.ng-leave {
    transition-property: all;
    transform: translate3d(0,0,0);
}

.slideRight.ng-leave.ng-leave-active {
    transition-property: all;
    transform: translate3d(100%,0,0);
}

/* slideLeft */
.slideLeft {
    opacity: 1 !important;
}

.slideLeft.ng-enter {
    transition-property: none;
    transform: translate3d(100%,0,0);
}

.slideLeft.ng-enter.ng-enter-active {
    transition-property: all;
    transform: translate3d(0,0,0);
}

.slideLeft.ng-leave {
    transition-property: all;
    transform: translate3d(0,0,0);
}

.slideLeft.ng-leave.ng-leave-active {
    transition-property: all;
    transform: translate3d(-100%,0,0);
}

/* slideDown */
.slideDown {

}

.slideDown.ng-enter {
    transition-property: none;
    transform: translate3d(0,-100%,0);
}

.slideDown.ng-enter.ng-enter-active {
    transition-property: all;
    transform: translate3d(0,0,0);
}

.slideDown.ng-leave {
    transition-property: all;
    transform: translate3d(0,0,0);
}

.slideDown.ng-leave.ng-leave-active {
    transition-property: all;
    transform: translate3d(0,100%,0);
}

/* slideUp */
.slideUp {
    opacity: 1 !important;
}

.slideUp.ng-enter {
    transition-property: none;
    transform: translate3d(0,100%,0);
}

.slideUp.ng-enter.ng-enter-active {
    transition-property: all;
    transform: translate3d(0,0,0);
}

.slideUp.ng-leave {
    transition-property: all;
    transform: translate3d(0,0,0);
}

.slideUp.ng-leave.ng-leave-active {
    transition-property: all;
    transform: translate3d(0,-100%,0);

Answer 1

Here is how I have been implementing simple view transitions between states.

HTML: States to Transition Between

<div class="row checkout-process">
<section class="col-sm-8 col-md-8 col-lg-8">
    <article class="shopping-cart" ui-view="shopping-cart" autoscroll="false"></article>
    <article class="order-confirmation" ui-view="order-confirmation" autoscroll="false"></article>
    <article class="thank-you" ui-view="thank-you" autoscroll="false"></article>
</section>

<section class="col-sm-4 col-md-4 col-lg-4">
    <kx-order-total></kx-order-total>
</section>

HTML: closed-state.html

<article class="col-sm-12 col-md-12 col-lg-12 next-state">
    <a ui-sref="{{state.name}}">
        <i class="fa fa-plus"></i> &nbsp;
        {{page.name}}
    </a>
</article>

CSS:

.shopping-cart[ui-view], .order-confirmation[ui-view], .thank-you[ui-view] {
  overflow: hidden;
}

.shopping-cart[ui-view].ng-enter, .order-confirmation[ui-view].ng-enter, .thank-you[ui-view].ng-enter {
  height: 0px;
  @include transition(height .35s ease-in-out);
  @include transition-delay(.35s);
}

.shopping-cart[ui-view].ng-enter-active, .order-confirmation[ui-view].ng-enter-active, .thank-you[ui-view].ng-enter-active {
  height: 200px;
}

.shopping-cart[ui-view].ng-leave, .order-confirmation[ui-view].ng-leave, .thank-you[ui-view].ng-leave {
  @include transition(all .35s ease-in-out);
  height: 200px;
}

.shopping-cart[ui-view].ng-leave-active, .order-confirmation[ui-view].ng-leave-active, .thank-you[ui-view].ng-leave-active {
  height: 0px;
}

Finally the relavent part of my states for transitioning.

            ////////////////////////
            //Order Checkout State//
            ////////////////////////

            .state('home.checkout', {
                url: 'checkout',
                views: {
                    '@home': {
                        templateUrl: 'views/partials/generic/checkout-process/order-checkout-root.html'
                    }
                }
            })

            .state('home.checkout.shoppingcart', {
                url: '^/shoppingcart',
                views: {
                    '[email protected]': {
                        templateUrl: 'views/partials/generic/checkout-process/shoppingcart/shopping-cart-partial.html',
                        controller: 'ShoppingCartController'
                    },
                    '[email protected]' : {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Order Confirmation'};
                            $scope.state = {name: 'home.checkout.confirm'};
                        }
                    },
                    '[email protected]' : {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Order Completion'};
                            $scope.state = {name: 'home.checkout.thankyou'};
                        }
                    }
                }
            })

            .state('home.checkout.confirm', {
                url: '/confirmation',
                views: {
                    '[email protected]': {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Shopping Cart'};
                            $scope.state = {name: 'home.checkout.shoppingcart'};
                        }
                    },
                    '[email protected]': {
                        templateUrl: '../views/partials/generic/checkout-process/confirmation/order-confirmation-partial.html',
                        controller: 'OrderConfirmationController'
                    },
                    '[email protected]' : {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Order Completion'};
                            $scope.state = {name: 'home.checkout.thankyou'};
                        }
                    }
                }
            })

            .state('home.checkout.thankyou', {
                url: '/thankyou',
                parent: 'home.checkout.confirm',
                views: {
                    '[email protected]': {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Shopping Cart'};
                            $scope.state = {name: 'home.checkout.shoppingcart'};
                        }
                    },
                    '[email protected]' : {
                        templateUrl: 'views/partials/generic/checkout-process/closed-state.html',
                        controller: function($scope) {
                            $scope.page = {name: 'Order Confirmation'};
                            $scope.state = {name: 'home.checkout.confirm'};
                        }
                    },
                    '[email protected]': {
                        templateUrl: '../views/partials/generic/checkout-process/thank-you/thank-you-partial.html',
                        controller: 'OrderConfirmationController'
                    }
                }
            });

This example is a bit more complex as I am transitioning between child states from the parent 'home.checkout'

If you want a great example to follow checkout the ui-router guys example. Its what got me going and a great simple way to learn it.