标签: angular-transitions

Angular 1.2.5嵌套动画

使用ng-view,我想要一个简单的fadeIn/fadeOut用于页面转换.但是,在不同的"视图"中,我有子元素,我希望在父元素上发生fadeIn/fadeOut的同时进行动画处理.问题是,如果父动画是动画的,则角度取消是任何嵌套动画.为什么是这样?还有另一种方法可以实现我想要的吗?

javascript animation angularjs ng-animate angular-transitions

6
推荐指数
1
解决办法
358
查看次数

特定项目的角度页面过渡动画

我想进行路线过渡,但不是简单的滑出/滑入动画。我正在寻找左边这样的动画(https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif

我知道如何为将重绘整个内容的路线设置动画。但是我怎样才能通过改变路线实现一个/多个组件转换到另一个组件的效果(左侧的这种放大/缩放效果)。

我将不胜感激任何建议或指导在哪里寻找一些示例代码。

angular-routing angular-transitions angular angular-animations angular-router

5
推荐指数
1
解决办法
1676
查看次数

具有多个路由器出口的 Angular 7 路由器动画

我正在尝试按照这篇文章和几篇类似的文章在路线之间添加转换。

我确实可以让它工作,但我在使用 CSS 绝对位置时遇到问题,这似乎需要:

router-outlet ~ * {
 position: absolute;
 width: 100%;
 height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

我的应用程序有多个路由出口:页眉、主页脚和页脚。我在应用程序根目录上使用 Flexbox 来使页眉和页脚粘在顶部和底部。

您可以在此stackblitz中看到布局和转换的工作原理。

问题在于,将位置设置为绝对和 100% 会导致内容进入页脚(请参阅“关于”页面)。

有没有办法在没有位置:绝对的情况下进行交叉淡入淡出过渡?这似乎假设内容占据整个页面。正如您所看到的,很多时候还有其他内容,例如页脚或其他静态内容或第二个路由器出口。

我正在寻找的是一种仅影响给定路由器插座中内容的过渡。

css angular-transitions angular angular-router

5
推荐指数
1
解决办法
912
查看次数

Angular CSS ngAnimate已翻译为开发人员

ngAnimate 当与路由一起使用时,可以设置不同的"CSS样式",以产生不同的过渡.

这是否是涵盖转换的所有CSS选项的正确模板?

myAnimation =代表我的css模板.

.myAnimation {}
.myAnimation.ng-enter {}
.myAnimation.ng-enter-active {}
.myAnimation.ng-leave {}
.myAnimation.ng-leave-active {}
Run Code Online (Sandbox Code Playgroud)

关于什么是影响什么时候有什么指南或文件?

我已经玩了一段时间了,我仍然不理解每个CSS项目的作用以及它们在动画中扮演的角色,我指的是" 绝望的观点 "和" 新观点".我理解这也涉及理解CSS,但我正在寻找的是使用最简单的CSS来理解这一点......开发人员可以使用它来从那里发展.

css css3 angularjs ng-animate angular-transitions

2
推荐指数
1
解决办法
489
查看次数