查看动画在使用命名视图时不起作用
我有一个动画附加到未命名的UI视图。 当路由器看起来像这样时，这可以正常工作：
工作示例：
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl as main',
resolve: {
events: function(EventStore) {
return EventStore.getAll();
}
}
})
.state('event', {
url: '/event/:id',
templateUrl: 'app/event/event.html',
controller: 'EventCtrl as eventCtrl',
resolve: {
event: function(EventStore, $stateParams) {
return EventStore.getEvent($stateParams.id);
}
}
})
工作html示例：
<div ui-view class="main"></div>
但是，当我添加不同的意见，像这样的UI路由器：破碎的例子：
$stateProvider
.state('home', {
url: '/',
views: {
'main': {
templateUrl: 'app/main/main.html',
controller: 'MainCtrl as main',
resolve: {
events: function(EventStore) {
return EventStore.getAll();
}
}
},
'navigation': {
templateUrl: 'app/components/navbar/navbar.html',
controller: 'NavbarCtrl as navbar',
}
}
})
.state('event', {
url: '/event/:id',
views: {
'main': {
templateUrl: 'app/event/event.html',
controller: 'EventCtrl as eventCtrl',
resolve: {
event: function(EventStore, $stateParams) {
return EventStore.getEvent($stateParams.id);
}
}
},
'aside': {
template: '<aside-info ng-if="asideCtrl.displayed"></aside-info>',
controller: 'AsideCtrl as asideCtrl'
}
}
})
破碎的HTML：
<div ui-view="navigation"></div>
<div ui-view="main" class="main"></div>
<div ui-view="aside"></div>
路由和视图正常工作，但动画不适用。 第二个例子中动画会被忽略的任何想法？
编辑1：这是动画CSS。 但是，如果我删除3个不同的视图，这会正常工作。
.transition-background {
position: fixed;
width: 100%;
height: 100vh;
}
.main {
transition: all $totalSpeed $animation .001s;
overflow: hidden;
&.ng-leave {
overflow: hidden;
.events {
transition: display 0 $animation $speed;
}
.event-animate {
transition: transform $speed2 $animation;
position: fixed;
overflow: hidden;
top: 0;
width: 100%;
min-height: 100vh;
transform: translate(0,0);
transform: translate3d(0,0,0);
top: 0;
z-index: 4;
}
.transition-background {
transition: transform $speed $animation $speed2;
background: #68BDFF;
position: fixed;
top: 0;
left: 0;
transform: translate(0,0);
transform: translate3d(0,0,0);
animation-direction: alternate;
width : 100%;
z-index: 3;
}
}
&.ng-leave-active {
.events {
display: none;
}
.event-animate {
transform: translate(0,100vh);
transform: translate3d(0,100vh,0);
}
.transition-background {
transform: translate(0,-100vh);
transform: translate3d(0,-100vh,0);
}
}
&.ng-enter {
overflow: hidden;
.event-animate {
transition: transform $totalSpeed $animation $speed;
position: fixed;
overflow: hidden;
width: 100%;
min-height: 100vh;
transform: translate(0,100vh);
transform: translate3d(0,100vh,0);
animation-direction: normal;
z-index: 4;
}
.transition-background {
transition: transform $speed $animation;
background: #68BDFF;
position: fixed;
top: 0;
left: 0;
transform: translate(0,-100vh);
transform: translate3d(0,-100vh,0);
width : 100%;
z-index: 3;
}
}
&.ng-enter-active {
.event-animate {
transform: translate(0,0);
transform: translate3d(0,0,0);
}
.transition-background {
transform: translate(0,0);
transform: translate3d(0,0,0);
}
}
}
我已经创建了一对夫妇来试图确定你面临的问题。 这是第一次重新创建你的第一个情况，你有一个未命名的ui-view 。 如果点击按钮进入事件状态，则可以看到动画CSS在解析完成时（2秒后）按预期应用。
这是第二次使用你的第二个设置与3个命名的UI视图。 你可以点击按钮来改变状态，你也会看到这个动画也适用于这种情况。
我所做的主要改变是你的状态配置中的解析对象应该与状态相关，而不是在视图内。
你可以尝试以下吗？
在app / main / main.html中，用它包装它的内容
<div class="main">
...content of main.html...
</div>
然后删除ui-view中的主类，这样你只会有这个
<div ui-view="navigation"></div>
<div ui-view="main"></div>
<div ui-view="aside"></div>
我猜测，当ui-view生成时，主类将被删除。 现在，不要依赖ui-view包装器，您可以在main.html中获取主类
让我知道它是否有帮助
链接地址: http://www.djcxy.com/p/28603.html