路线动画角度4

我正在处理的应用程序需要能够在路线中来回导航，所以当您沿一个方向浏览应用程序时，组件从左向右进行动画制作，当您向后导航时，从右向左导航。路线动画角度4

即

component1 -> component2 = left -> right animation 
component2 -> component1 = right -> left animation

我可以在NG4实现这一点很容易不够好，但问题是，它没有导航都退出和进入的部件。退出的组件正好消失，输入的组件动画。

我也可以在NG2中实现这一点 - 但是当你有条件动画时会出现复杂情况。即。

component2 -> component3 = left -> right animation 
component2 -> component1 = right -> left animation

这里的问题是根据下一个或上一个路线触发不同的动画。

有没有人有NG2或4的解决方案来解决在两个方向同时动画两个视图的问题？

我没有把它放在plunkr中，因为我不知道如何设置NG4应用程序。道歉。

我NG4解决方案是基于this demo app https://github.com/matsko/ng4-animations-preview

但基本上我app.component.ts我有以下的动画：

animations: [ 
    trigger('routerAnimations',[ 
     transition('page1 => page2',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page2 => page1', [ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]), 
     transition('page2 => page3',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page3 => page2',[ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]), 
     transition('page3 => page4',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page4 => page3',[ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]) 
    ]) 
]

，并从每个路由抓住动画值的函数和结合其对<router-outlet> in app.component.html出口变量（？）：上述

export class AppComponent { 
    prepareRouteTransition(outlet) { 
     let routeData: any; 
     try { 
      routeData = outlet['_activatedRoute'].snapshot.routeConfig['animation']; 
     } catch(e) { 
      return ''; 
     } 
     return routeData.value; 
    } 
}

功能抓起动画值这是在动画用来定义过渡的开始和结束值：

export const APP_ROUTES = [{ 
    path: '', 
    component: Page1Component, 
    animation: { 
     value: 'page1', 
    } 
    }, 
    { 
    path: 'page2', 
    component: Page2Component, 
    animation: { 
     value: 'page2', 
    } 
    }, 
    { 
    path: 'page3', 
    component: Page3Component, 
    animation: { 
     value: 'page3' 
    } 
    }, 
    { 
     path: 'page4', 
     component: Page4Component, 
     animation: { 
      value: 'page4' 
     } 
    } 
];

app.component.html：

<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)"> 
    <router-outlet #outlet="outlet"></router-outlet> 
</div>

来源

2017-04-12 Clay

同样的问题在这里，我赶到同一个路障。你知道了吗？ – elecash

谢谢@Clay我已经测试过，效果非常好:)但是我要等到4.1.0，因为实现更简洁，但这应该是现在被接受的答案 – elecash

可以通过定义，对于:enter和:leave元件查询动画现在实现这一。

这个例子将动画出来的退出路线和顺利的进入路径动画：

const slideLeft = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' })), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' })), 
    group([ 
    query(':leave', 
     animate('1s', style({ transform: 'translate3d(100%,0,0)' }))), 
    query(':enter', 
     animate('1s', style({ transform: 'translate3d(0%,0,0)' }))) 
    ]) 
] 

const slideRight = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'})), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'})), 

    group([ 
    query(':leave', 
     animate('1s', style({ transform: 'translate3d(-100%,0,0)' }))), 
    query(':enter', 
     animate('1s', style({ transform: 'translate3d(0%,0,0)' }))) 
    ]) 
] 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    animations: [ 
    trigger('routerAnimations', [ 
     transition('products => product-details', slideRight), 
     transition('product-details => products', slideLeft) 
    ]) 
    ] 
})

来源

2017-06-17 06:52:36 SpaceFozzy

路线动画角度4

回答

相关问题