Question

我有一个div，其中x图像水平对齐。 div只能一次显示一个图像。当我按下按钮时，我想为项目设置动画，直到下一个图像可见。我尝试使用动画触发器，但由于我可能有未知数量的图像，我不知道如何更改触发器中的translate变量。当我将状态设置为'in'时，它会动画一次到-100％，但是当我再次单击该按钮时，我希望它继续为下一个图像设置动画。所以对于第三张图片，我需要将translateX更改为-200％。有没有办法做到这一点，或另一种方式来处理这种动画？

trigger('animateX', [
        state('in', style({ transform: 'translateX(-100%)' })),
        transition('start => in', [
            style({
                transform: 'translateX(0%)'
            }),
            animate('0.2s ease-in')
        ])
    ])

模板......

 <div class="carousel">
    <ul class="images">
        <li [@animateX]="state">
    <img src="myImage1" />
        </li>
        <li [@animateX]="state">
    <img src="myImage2" />
        </li>
        <li [@animateX]="state">
    <img src="myImage3" />
        </li>
<ul >

[更新]我想添加一个前进和后退按钮，使旋转木马动画到相应的方向。到目前为止，我有以下触发器，它可以正常工作，除了两种情况：

如果我按下一个，然后按下后退按钮，新项目会正确显示，但当前项目的方向错误。如果我再次按回然后就可以了。只有在将状态从下一个切换到prev时才会出现，反之亦然。
最初显示轮播时，我不希望发生任何动画。旋转木马应该只显示第一项。

这是触发器代码，下面是@micronyks

     trigger('animateX', [            
        state('next', style({})),
        transition('* => next', [
            style({ transform: 'translatex(100%)' }),
            animate(300)
        ]),
        transition('next => void', [
            animate(300, style({ transform: 'translateX(-100%)' }))
        ]),

        state('prev', style({})),
        transition('* => prev', [
            style({ transform: 'translatex(-100%)' }),
            animate(300)
        ]),
        transition('prev => void', [
            animate(300, style({ transform: 'translateX(100%)' }))
        ])
    ])

http://plnkr.co/edit/SS3nb7bkl3YBMoViDsRz?p=preview

动画未知数量的项目

0 个答案: