mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Sexy title anim
This commit is contained in:
Max Lynch
55
dist/css/ionic.css
vendored
55
dist/css/ionic.css
vendored
@ -2934,8 +2934,7 @@ a.button {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(-100%, 0, 0); }
|
||||
|
||||
.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter, .slide-left-right-reverse > .ng-leave, .slide-left-right-reverse.ng-leave {
|
||||
.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter, .slide-left-right.reverse > .ng-leave, .slide-left-right.reverse.ng-leave {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -2943,11 +2942,11 @@ a.button {
|
||||
bottom: 0;
|
||||
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
|
||||
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
|
||||
.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter {
|
||||
.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter {
|
||||
-webkit-transform: translate3d(-100%, 0, 0); }
|
||||
.slide-left-right-reverse > .ng-enter.ng-enter-active, .slide-left-right-reverse.ng-enter.ng-enter-active {
|
||||
.slide-left-right.reverse > .ng-enter.ng-enter-active, .slide-left-right.reverse.ng-enter.ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.slide-left-right-reverse > .ng-leave.ng-leave-active, .slide-left-right-reverse.ng-leave.ng-leave-active {
|
||||
.slide-left-right.reverse > .ng-leave.ng-leave-active, .slide-left-right.reverse.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(100%, 0, 0); }
|
||||
|
||||
.slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter, .slide-left-right-ios7 > .ng-leave, .slide-left-right-ios7.ng-leave {
|
||||
@ -2968,8 +2967,7 @@ a.button {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.slide-left-right-ios7 > .ng-leave.ng-leave-active, .slide-left-right-ios7.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(-20%, 0, 0); }
|
||||
|
||||
.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter, .slide-left-right-ios7-reverse > .ng-leave, .slide-left-right-ios7-reverse.ng-leave {
|
||||
.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter, .slide-left-right-ios7.reverse > .ng-leave, .slide-left-right-ios7.reverse.ng-leave {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -2979,11 +2977,11 @@ a.button {
|
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
|
||||
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
|
||||
.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter {
|
||||
.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter {
|
||||
-webkit-transform: translate3d(-20%, 0, 0); }
|
||||
.slide-left-right-ios7-reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7-reverse.ng-enter.ng-enter-active {
|
||||
.slide-left-right-ios7.reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7.reverse.ng-enter.ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.slide-left-right-ios7-reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7-reverse.ng-leave.ng-leave-active {
|
||||
.slide-left-right-ios7.reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7.reverse.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(100%, 0, 0); }
|
||||
|
||||
@-webkit-keyframes slideInLeft {
|
||||
@ -3209,6 +3207,43 @@ a.button {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
/**
|
||||
* Some component specific animations
|
||||
*/
|
||||
.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter, .nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
|
||||
-webkit-transition: all 250ms;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
|
||||
transition: all 250ms;
|
||||
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
opacity: 1; }
|
||||
.nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(30%, 0, 0); }
|
||||
.nav-title-slide-ios7 > .ng-enter.ng-enter-active, .nav-title-slide-ios7.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.nav-title-slide-ios7 > .ng-leave.ng-leave-active, .nav-title-slide-ios7.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-30%, 0, 0); }
|
||||
|
||||
.reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter, .reverse .nav-title-slide-ios7 > .ng-leave, .reverse .nav-title-slide-ios7.ng-leave {
|
||||
-webkit-transition: all 250ms;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
|
||||
transition: all 250ms;
|
||||
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
opacity: 1; }
|
||||
.reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-30%, 0, 0); }
|
||||
.reverse .nav-title-slide-ios7 > .ng-enter.ng-enter-active, .reverse .nav-title-slide-ios7.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
.reverse .nav-title-slide-ios7 > .ng-leave.ng-leave-active, .reverse .nav-title-slide-ios7.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(30%, 0, 0); }
|
||||
|
||||
/**
|
||||
* Grid
|
||||
* --------------------------------------------------
|
||||
|
||||
84
dist/js/ionic-angular.js
vendored
84
dist/js/ionic-angular.js
vendored
@ -25293,8 +25293,13 @@ angular.module('ionic.ui.navRouter', [])
|
||||
isVisible: true
|
||||
};
|
||||
|
||||
this.setTitle = function(value) {
|
||||
$scope.$broadcast('navRouter.titleChanged', value);
|
||||
};
|
||||
|
||||
$scope.navController = this;
|
||||
}],
|
||||
|
||||
link: function($scope, $element, $attr) {
|
||||
$scope.animation = $attr.animation;
|
||||
|
||||
@ -25309,27 +25314,27 @@ angular.module('ionic.ui.navRouter', [])
|
||||
var reverseTransition = function() {
|
||||
console.log('REVERSE');
|
||||
$element.removeClass('noop-animation');
|
||||
$element.removeClass($scope.animation);
|
||||
$element.addClass($scope.animation + '-reverse');
|
||||
$element.addClass($scope.animation);
|
||||
$element.addClass('reverse');
|
||||
};
|
||||
|
||||
var forwardTransition = function() {
|
||||
console.log('FORWARD');
|
||||
$element.removeClass('noop-animation');
|
||||
$element.removeClass($scope.animation + '-reverse');
|
||||
$element.removeClass('reverse');
|
||||
$element.addClass($scope.animation);
|
||||
};
|
||||
|
||||
$scope.$on('$routeChangeSuccess', function(e, a) {
|
||||
console.log('ROUTE CHANGED', a, e);
|
||||
});
|
||||
$scope.$on('$routeChangeStart', function(e, a) {
|
||||
console.log('ROUTE START', a, e);
|
||||
$scope.$on('$routeChangeStart', function(e, next, current) {
|
||||
console.log('ROUTE START', e, next, current);
|
||||
var back, historyState = $window.history.state;
|
||||
|
||||
back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
|
||||
|
||||
if(isFirst) {
|
||||
if(isFirst || (next && next.$$route.originalPath === "")) {
|
||||
// Don't animate
|
||||
return;
|
||||
}
|
||||
@ -25341,9 +25346,9 @@ angular.module('ionic.ui.navRouter', [])
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on('$locationChangeSuccess', function() {
|
||||
$scope.$on('$locationChangeSuccess', function(a, b, c) {
|
||||
// Store the new location
|
||||
console.log('LOCATION CHANGE SUCCESS');
|
||||
console.log('LOCATION CHANGE SUCCESS', a, b, c);
|
||||
$rootScope.actualLocation = $location.path();
|
||||
if(isFirst) {
|
||||
isFirst = false;
|
||||
@ -25389,7 +25394,30 @@ angular.module('ionic.ui.navRouter', [])
|
||||
/**
|
||||
* Our Nav Bar directive which updates as the controller state changes.
|
||||
*/
|
||||
.directive('navBar', ['$rootScope', function($rootScope) {
|
||||
.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
|
||||
var animate = function($element, oldTitle, newTitle, cb) {
|
||||
if(!oldTitle || oldTitle === newTitle) {
|
||||
cb();
|
||||
return;
|
||||
}
|
||||
|
||||
var title, nTitle, titles = $element[0].querySelectorAll('.title');
|
||||
if(titles.length > 1) {
|
||||
nTitle = titles[0];
|
||||
title = titles[1];
|
||||
} else if(titles.length) {
|
||||
title = titles[0];
|
||||
nTitle = document.createElement('h1');
|
||||
nTitle.className = 'title';
|
||||
nTitle.appendChild(document.createTextNode(newTitle));
|
||||
|
||||
$animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
|
||||
$animate.leave(angular.element(title), function() {
|
||||
cb();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navRouter',
|
||||
@ -25402,12 +25430,11 @@ angular.module('ionic.ui.navRouter', [])
|
||||
alignTitle: '@',
|
||||
},
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
'<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
|
||||
'<h1 class="title">{{navController.getTopController().scope.title}}</h1>' +
|
||||
'<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
|
||||
'<h1 class="title" ng-bind="currentTitle"></h1>' +
|
||||
'</header>',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
var backButton;
|
||||
|
||||
$scope.enableBackButton = true;
|
||||
|
||||
$scope.backButtonContent = '';
|
||||
@ -25444,6 +25471,18 @@ angular.module('ionic.ui.navRouter', [])
|
||||
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
$scope.$parent.$on('navRouter.titleChanged', function(e, value) {
|
||||
console.log(value);
|
||||
console.log('Title changing from', $scope.currentTitle, 'to', value);
|
||||
var oldTitle = $scope.currentTitle;
|
||||
animate($element, oldTitle, value, function() {
|
||||
$scope.currentTitle = value;
|
||||
hb.align();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
$scope.$parent.$on('navigation.push', function() {
|
||||
backButton = angular.element($element[0].querySelector('.button'));
|
||||
backButton.addClass($scope.backButtonType);
|
||||
@ -25452,6 +25491,7 @@ angular.module('ionic.ui.navRouter', [])
|
||||
$scope.$parent.$on('navigation.pop', function() {
|
||||
hb.align();
|
||||
});
|
||||
*/
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
//
|
||||
@ -25460,6 +25500,26 @@ angular.module('ionic.ui.navRouter', [])
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('navPage', ['$parse', function($parse) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: true,
|
||||
require: '^navRouter',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
$element.addClass('pane');
|
||||
|
||||
var titleGet = $parse($attr.title);
|
||||
|
||||
$scope.$watch(titleGet, function(value) {
|
||||
console.log('Title changed');
|
||||
$scope.title = value;
|
||||
navCtrl.setTitle(value);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}])
|
||||
|
||||
.directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
|
||||
84
js/ext/angular/src/directive/ionicNavRouter.js
vendored
84
js/ext/angular/src/directive/ionicNavRouter.js
vendored
@ -34,8 +34,13 @@ angular.module('ionic.ui.navRouter', [])
|
||||
isVisible: true
|
||||
};
|
||||
|
||||
this.setTitle = function(value) {
|
||||
$scope.$broadcast('navRouter.titleChanged', value);
|
||||
};
|
||||
|
||||
$scope.navController = this;
|
||||
}],
|
||||
|
||||
link: function($scope, $element, $attr) {
|
||||
$scope.animation = $attr.animation;
|
||||
|
||||
@ -50,27 +55,27 @@ angular.module('ionic.ui.navRouter', [])
|
||||
var reverseTransition = function() {
|
||||
console.log('REVERSE');
|
||||
$element.removeClass('noop-animation');
|
||||
$element.removeClass($scope.animation);
|
||||
$element.addClass($scope.animation + '-reverse');
|
||||
$element.addClass($scope.animation);
|
||||
$element.addClass('reverse');
|
||||
};
|
||||
|
||||
var forwardTransition = function() {
|
||||
console.log('FORWARD');
|
||||
$element.removeClass('noop-animation');
|
||||
$element.removeClass($scope.animation + '-reverse');
|
||||
$element.removeClass('reverse');
|
||||
$element.addClass($scope.animation);
|
||||
};
|
||||
|
||||
$scope.$on('$routeChangeSuccess', function(e, a) {
|
||||
console.log('ROUTE CHANGED', a, e);
|
||||
});
|
||||
$scope.$on('$routeChangeStart', function(e, a) {
|
||||
console.log('ROUTE START', a, e);
|
||||
$scope.$on('$routeChangeStart', function(e, next, current) {
|
||||
console.log('ROUTE START', e, next, current);
|
||||
var back, historyState = $window.history.state;
|
||||
|
||||
back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
|
||||
|
||||
if(isFirst) {
|
||||
if(isFirst || (next && next.$$route.originalPath === "")) {
|
||||
// Don't animate
|
||||
return;
|
||||
}
|
||||
@ -82,9 +87,9 @@ angular.module('ionic.ui.navRouter', [])
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on('$locationChangeSuccess', function() {
|
||||
$scope.$on('$locationChangeSuccess', function(a, b, c) {
|
||||
// Store the new location
|
||||
console.log('LOCATION CHANGE SUCCESS');
|
||||
console.log('LOCATION CHANGE SUCCESS', a, b, c);
|
||||
$rootScope.actualLocation = $location.path();
|
||||
if(isFirst) {
|
||||
isFirst = false;
|
||||
@ -130,7 +135,30 @@ angular.module('ionic.ui.navRouter', [])
|
||||
/**
|
||||
* Our Nav Bar directive which updates as the controller state changes.
|
||||
*/
|
||||
.directive('navBar', ['$rootScope', function($rootScope) {
|
||||
.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
|
||||
var animate = function($element, oldTitle, newTitle, cb) {
|
||||
if(!oldTitle || oldTitle === newTitle) {
|
||||
cb();
|
||||
return;
|
||||
}
|
||||
|
||||
var title, nTitle, titles = $element[0].querySelectorAll('.title');
|
||||
if(titles.length > 1) {
|
||||
nTitle = titles[0];
|
||||
title = titles[1];
|
||||
} else if(titles.length) {
|
||||
title = titles[0];
|
||||
nTitle = document.createElement('h1');
|
||||
nTitle.className = 'title';
|
||||
nTitle.appendChild(document.createTextNode(newTitle));
|
||||
|
||||
$animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
|
||||
$animate.leave(angular.element(title), function() {
|
||||
cb();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navRouter',
|
||||
@ -143,12 +171,11 @@ angular.module('ionic.ui.navRouter', [])
|
||||
alignTitle: '@',
|
||||
},
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
'<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
|
||||
'<h1 class="title">{{navController.getTopController().scope.title}}</h1>' +
|
||||
'<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
|
||||
'<h1 class="title" ng-bind="currentTitle"></h1>' +
|
||||
'</header>',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
var backButton;
|
||||
|
||||
$scope.enableBackButton = true;
|
||||
|
||||
$scope.backButtonContent = '';
|
||||
@ -185,6 +212,18 @@ angular.module('ionic.ui.navRouter', [])
|
||||
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
$scope.$parent.$on('navRouter.titleChanged', function(e, value) {
|
||||
console.log(value);
|
||||
console.log('Title changing from', $scope.currentTitle, 'to', value);
|
||||
var oldTitle = $scope.currentTitle;
|
||||
animate($element, oldTitle, value, function() {
|
||||
$scope.currentTitle = value;
|
||||
hb.align();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
$scope.$parent.$on('navigation.push', function() {
|
||||
backButton = angular.element($element[0].querySelector('.button'));
|
||||
backButton.addClass($scope.backButtonType);
|
||||
@ -193,6 +232,7 @@ angular.module('ionic.ui.navRouter', [])
|
||||
$scope.$parent.$on('navigation.pop', function() {
|
||||
hb.align();
|
||||
});
|
||||
*/
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
//
|
||||
@ -201,6 +241,26 @@ angular.module('ionic.ui.navRouter', [])
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('navPage', ['$parse', function($parse) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: true,
|
||||
require: '^navRouter',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
$element.addClass('pane');
|
||||
|
||||
var titleGet = $parse($attr.title);
|
||||
|
||||
$scope.$watch(titleGet, function(value) {
|
||||
console.log('Title changed');
|
||||
$scope.title = value;
|
||||
navCtrl.setTitle(value);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}])
|
||||
|
||||
.directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
|
||||
@ -12,37 +12,37 @@
|
||||
</head>
|
||||
<body>
|
||||
<pane nav-router animation="slide-left-right">
|
||||
<nav-bar back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
|
||||
<nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
|
||||
<ng-view></ng-view>
|
||||
</pane>
|
||||
|
||||
<script id="page1.html" type="text/ng-template">
|
||||
<pane>
|
||||
<nav-page title="'Bears'">
|
||||
<h1>Page 1</h1>
|
||||
<span>{{num}}</span>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page2">Next</a>
|
||||
</pane>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page2.html" type="text/ng-template">
|
||||
<pane>
|
||||
<nav-page title="'Beets'">
|
||||
<h1>Page 2</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page3">Next</a>
|
||||
</pane>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page3.html" type="text/ng-template">
|
||||
<pane>
|
||||
<nav-page title="'Battlestar Galactica'">
|
||||
<h1>Page 3</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
</pane>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic'])
|
||||
|
||||
|
||||
.config(function($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/page1', {
|
||||
$routeProvider.when('/', {
|
||||
templateUrl: 'page1.html',
|
||||
controller: 'Page1Ctrl'
|
||||
});
|
||||
@ -54,9 +54,6 @@
|
||||
$routeProvider.when('/page3', {
|
||||
templateUrl: 'page3.html',
|
||||
});
|
||||
$routeProvider.otherwise({
|
||||
redirectTo: '/page1'
|
||||
});
|
||||
|
||||
// configure html5 to get links working on jsfiddle
|
||||
//$locationProvider.html5Mode(true);
|
||||
|
||||
@ -39,28 +39,28 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
|
||||
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.slide-left-right-reverse {
|
||||
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||
}
|
||||
> .ng-enter, &.ng-enter {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||
}
|
||||
> .ng-enter, &.ng-enter {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.slide-left-right-ios7 {
|
||||
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
||||
position:absolute;
|
||||
@ -84,27 +84,28 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
|
||||
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(-20%, 0, 0);
|
||||
}
|
||||
}
|
||||
.slide-left-right-ios7-reverse {
|
||||
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
-webkit-transition:all 250ms;
|
||||
-webkit-transition-timing-function: $ios7-timing-function;
|
||||
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||
transition-timing-function: $ios7-timing-function;
|
||||
}
|
||||
> .ng-enter, &.ng-enter {
|
||||
-webkit-transform: translate3d(-20%, 0, 0);
|
||||
}
|
||||
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
|
||||
&.reverse {
|
||||
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
-webkit-transition:all 250ms;
|
||||
-webkit-transition-timing-function: $ios7-timing-function;
|
||||
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||
transition-timing-function: $ios7-timing-function;
|
||||
}
|
||||
> .ng-enter, &.ng-enter {
|
||||
-webkit-transform: translate3d(-20%, 0, 0);
|
||||
}
|
||||
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -373,3 +374,57 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Some component specific animations
|
||||
*/
|
||||
|
||||
.nav-title-slide-ios7 {
|
||||
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
||||
-webkit-transition:all 250ms;
|
||||
-webkit-transition-timing-function: $ios7-timing-function;
|
||||
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||
transition:all 250ms;
|
||||
transition-timing-function: $ios7-timing-function;
|
||||
opacity: 1;
|
||||
}
|
||||
> .ng-enter, &.ng-enter {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(30%, 0, 0);
|
||||
}
|
||||
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-30%, 0, 0);
|
||||
}
|
||||
|
||||
}
|
||||
.reverse {
|
||||
.nav-title-slide-ios7 {
|
||||
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
|
||||
-webkit-transition:all 250ms;
|
||||
-webkit-transition-timing-function: $ios7-timing-function;
|
||||
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||
transition:all 250ms;
|
||||
transition-timing-function: $ios7-timing-function;
|
||||
opacity: 1;
|
||||
}
|
||||
> .ng-enter, &.ng-enter {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-30%, 0, 0);
|
||||
}
|
||||
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(30%, 0, 0);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user