Question

我想制作一个幻灯片，然后通过* ngIf和组件中的index var切换幻灯片（index var设置为我的前进/后退按钮）-很简单。动画很简单：

    drivesToMap = ["R: \\\\server1\folder", "G: \\\\server1\folder withSpace"]
    for eachDrive in drivesToMap:
        call("net use " + eachDrive)

在模板中，如下所示：

trigger("slideInOut", [
    transition(":enter", [
        style({ transform: "translateX(+100%)", position: "absolute" }),
        animate("400ms ease-in", style({ transform: "translateX(0%)" }))
    ]),
    transition(":leave", [
        style({ transform: "translateX(0%)"}),
        animate("400ms ease-out", style({ transform: "translateX(-100%)" }))
    ])
])

，依此类推。但是现在我要更改幻灯片放映方向（左/右）的动画，这意味着：向前，向后->在translateX等中使用+/- 100％。在我的组件中，我有一个var方向，该方向的方向取决于'left'或'right'，但是我不知道如何将其传递给动画并仍然使用请假/输入。有想法吗？

编辑，发现： see tutorial here

<div class="slide" *ngIf="slideIndex === 0" [@slideInOut]>

和

trigger("slideInOut", [
    transition("void => prev", [
        style({ transform: "translateX(-100%)", position: "absolute", top: 0, opacity: 0 }),
        animate("300ms ease-in", style({ transform: "translateX(0%)", opacity: 1 }))
    ]),
    transition("prev => void", [
        animate("300ms ease-out", style({ transform: "translateX(+100%)", opacity: 0 }))
    ]),
    transition("void => next", [
        style({ transform: "translateX(+100%)", position: "absolute", top: 0,  opacity: 0 }),
        animate("300ms ease-in", style({ transform: "translateX(0%)", opacity: 1 }))
    ]),
    transition("next => void", [
        animate("300ms ease-out", style({ transform: "translateX(-100%)", opacity: 0 }))
    ])
])

将完成这项工作。 “方向”是组件中的变量，“下一个”和“上一个”按钮将其状态切换为“下一个” /“上一个”

带有ngIf和其他参数的Angular 2+动画

0 个答案: