Angular UI路由器：UI状态变化的定位

我目前正在为代理机构开发一个重角度驱动的主页。现在我处于状态转变。我添加了一个简单的淡入淡出效果的页面转换。现在我遇到的问题是，状态更改时添加的新ui-view在第一个ui-view之前被添加。一切都好，但随着第一个ui视图淡出，第二个视图已经添加，转换看起来很蹩脚。所以，我想在第一个UI视图之后添加新的UI视图。Angular UI路由器：UI状态变化的定位

重要提示：我使用视差效果，因此无法使用页面容器和绝对定位。

Before ui-view change

此图片显示我想以后有什么。

After ui-view change

来源

2015-01-01 Nick Schmidt

在这种情况下'ng-animate'是不够的吗？（https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-animate-ui-view-with-ng-animate）新视图插入的位置是非常硬编码到'ui-view'的代码中：https://github.com/angular-ui/ui-router/blob/master/src/viewDirective.js#L191 –

我正在使用'ng-animate'。否则，它不可能有过渡，是吗？ –

嗯......是的，可以在不使用'ng-animate'的情况下使用JavaScript应用CSS转换。看到你_did not_指定你正在使用'ng-animate'我以为你不是_。 'ng-view'几乎是硬编码的，以便在DOM中插入新视图_现有的视图。所以你的问题在于转换的CSS规则。你也没有向我们展示这些。 –

我曾面临类似的问题，那是因为我有动画上都进入和离开。

你不需要进入和离开的动画。只有在请假时或只有输入时，才可以播放动画

例如，

.ng-enter { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
    opacity: 0; 
}

结账的宽松政策在动画这个PLUNKER

或者如果你想动画在进入和离开，然后在动画

增加延迟增加延迟，你的转换：

.ng-enter{ 
    -webkit-transition: all 2s ease 1s; 
    -moz-transition: all 2s ease 1s; 
    -o-transition: all 2s ease 1s; 
    transition: all 2s ease 1s; 
} 

.ng-leave { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
}

来源

2015-01-01 19:01:57 harishr

我正在这里拖延。 –

你可以创建一个问题的重点？ – harishr

@哈里斯的回答：

http://plnkr.co/edit/pzsDd1zPvHgdZe099upi?p=preview

我们有2个转变：

IN：

.ng-enter { 
    transition: opacity 1s ease; // autoprefixer 
    opacity: 0; // start animating 
} 
.ng-enter-active { 
    opacity: 1; // end animating 
}

OUT：

.ng-exit { 
    transition: opacity 1s ease; // autoprefixer 
    opacity: 1; // start animating 
} 
.ng-exit-active { 
    opacity: 0; // end animating 
}

这将需要1秒淡入淡出块。当只有1块时，它立即消失1秒。如果有两个街区（从一个街区到另一个街区？）会怎么样？我们可以用延迟和一些漂亮的CSS：

// Selector only matches if 2 sibling animating elements exist 
.ng-animate + .ng-animate { 
    // Avoid pushing around DOM 
    // Property disappears once the first sibling leaves 
    position:absolute; 
    // Delay fade-in until first sibling leaves 
    transition-delay: 1s; // autoprefixer 
}

没有这个奇特选择，你打开一看你第一次就会有一个1秒的延迟发生任何事情之前。

来源

2015-01-05 02:50:03 ProLoser

Angular UI路由器：UI状态变化的定位

回答

相关问题