typescript - วิธีใช้แอนิเมชันของ Angular2 (rc.4) เมื่อเปลี่ยนที่อยู่ด้วย ngrx/router

ข้อจำกัดความรับผิด - โปรดทราบว่าฉันรู้ว่าฉันกำลังอธิบายแบบกว้าง ๆ และระดับสูงอยู่ แต่ตอนนี้ฉันยังไม่รู้ว่าฉันต้องทำอะไร....

ฉันกำลังทำงานกับหรืออาจจะพูดว่าฉันกำลังพยายามเรียนรู้ Angular2 และฉันอยากใช้ Animation API ใหม่ที่ถูกเพิ่มเข้ามาใน release candidate 3/4 เอกสารอยู่ที่นี่: https://angular.io/docs/ts/latest/guide/animations.html

ตอนนี้ ทุกอย่างดูเหมือนจะตรงไปตรงมาพอสมควร แต่ฉันต้องการใช้การเปลี่ยนแปลง CSS เมื่อเราปรับเปลี่ยน URL ของแอปพลิเคชัน (ไปยังมุมมองลูก) อย่างไรก็ตามฉันไม่แน่ใจว่าฉันจะจับเหตุการณ์การเปลี่ยนตำแหน่งในคอมโพเนนต์ main.ts ของฉัน หรือในคอมโพเนนต์ใดๆ ที่ฉันต้องการเพิ่มคุณสมบัติ animations อย่างไร ตัวอย่างที่เอกสารให้ใช้ไวยากรณ์ @triggerName เพื่อใช้หรือสลับการเคลื่อนไหว แต่ฉันไม่แน่ใจว่าสิ่งนี้สามารถใช้ได้เมื่อเราอยากให้การเปลี่ยนหน้าเกิดการเคลื่อนไหวหรือไม่

ดังนั้นถ้านี่คือ main.html ของฉัน:

<my-app>
    <div class="nav">
        <a linkTo="/">Home</a>
        <a linkTo="/here">Here</a>
        <a linkTo="/there">There</a>
    </div>

    <div class="main">
        <!-- this is what I want to animate -->
        <route-view></route-view>
    </div>
</my-app>

และนี่อยู่ใน main.ts ของฉัน

@Component({
    selector: 'my-app',
    directives: [  ],
    pipes: [ ],
    templateUrl: 'src/main.html',
    // I need to capture the location change and apply a css animation
    animations: [
    // Do I need a state for this????
        state('in', style({transform: 'translateX(0)'})),
            transition('void => *', [
                style({transform: 'translateX(-100%)'}),
                animate(100)
            ]),
            transition('* => void', [
                animate(100, style({transform: 'translateX(100%)'}))
            ])
  ])
    ]
})

ฉันกำลังใช้ @ngrx/router และฉันรู้ว่ามันมาพร้อมกับคลาส LocationChange ขอบคุณล่วงหน้าสำหรับคำแนะนำใด ๆ… ถ้าคุณรู้จักลิงก์ไปยังบทเรียนที่ดี จะขอบคุณมาก!

นี่คือเอฟเฟกต์ที่ฉันพยายามจะทำให้เกิดขึ้นกับ AngularJS: https://codepen.io/schonert/pen/InAzi