使用ng-view,我想要一个简单的fadeIn/fadeOut用于页面转换.但是,在不同的"视图"中,我有子元素,我希望在父元素上发生fadeIn/fadeOut的同时进行动画处理.问题是,如果父动画是动画的,则角度取消是任何嵌套动画.为什么是这样?还有另一种方法可以实现我想要的吗?
javascript animation angularjs ng-animate angular-transitions
我想进行路线过渡,但不是简单的滑出/滑入动画。我正在寻找左边这样的动画(https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif)
我知道如何为将重绘整个内容的路线设置动画。但是我怎样才能通过改变路线实现一个/多个组件转换到另一个组件的效果(左侧的这种放大/缩放效果)。
我将不胜感激任何建议或指导在哪里寻找一些示例代码。
angular-routing angular-transitions angular angular-animations angular-router
我正在尝试按照这篇文章和几篇类似的文章在路线之间添加转换。
我确实可以让它工作,但我在使用 CSS 绝对位置时遇到问题,这似乎需要:
router-outlet ~ * {
position: absolute;
width: 100%;
height: 100%;
}
Run Code Online (Sandbox Code Playgroud)
我的应用程序有多个路由出口:页眉、主页脚和页脚。我在应用程序根目录上使用 Flexbox 来使页眉和页脚粘在顶部和底部。
您可以在此stackblitz中看到布局和转换的工作原理。
问题在于,将位置设置为绝对和 100% 会导致内容进入页脚(请参阅“关于”页面)。
有没有办法在没有位置:绝对的情况下进行交叉淡入淡出过渡?这似乎假设内容占据整个页面。正如您所看到的,很多时候还有其他内容,例如页脚或其他静态内容或第二个路由器出口。
我正在寻找的是一种仅影响给定路由器插座中内容的过渡。
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来理解这一点......开发人员可以使用它来从那里发展.