5
私はui-routerを使用していますが、ビューの切り替えが動作するように、つまりビューの変更をアニメーション化しようとしています。私が試したことは以下の通りですが、ビューの変更にはアニメーションが表示されません。なぜですか？ビュートランジションでui-routerを使用する
HTML：
読み込んでいます...私の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);
私はちょうどこの記事に出くわしましたが、角張っているかどうかわからないのですが、これはタイプミスですか？ 'RestangularProvider'それは他のパラメータのようにケースに入れられていないので私は尋ねます。 – wootscootinboogie
@wootscootinboogieいいえ、それはタイプミスではありません:) – Prometheus
これに対してプランナーを作成できますか？ –