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);
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);
-
I just randomly came across this post and don't know diddly about angular, but is this a typo?
RestangularProviderI ask because it's not cased like the other parameters. – wootscootinboogie Commented Jan 8, 2014 at 20:42 - @wootscootinboogie no it's not a typo :) – Prometheus Commented Jan 8, 2014 at 20:59
- Can you create a plunker for this? – Tony Zampogna Commented Apr 10, 2014 at 10:20
- If you can provide some html so I can see what you are doing at that level as well it would greatly help to solve the riddle. Or like @TonyZampogna said - make a plunker... – Sten Muchow Commented Apr 16, 2014 at 6:22
1 Answer
Reset to default 2Here 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>
{{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 plex 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745407700a4626388.html
评论列表（0条）