角度2。动画从左到右移动

Question

我有一个元素根据标志从左向右移动并向后移动：plunker。现在我想给它添加一个动画。我试图以最明显的方式做到这一点：

animations: [
    trigger('state', [
        state('true', style({
            right: '10px',
        })),
        state('false', style({
            left: '10px',
        })),
        transition('* => *', animate('250ms')),
    ]),
],

从左向右移动时有效，但其他方式无效：plunker。

有什么办法可以解决这个问题吗？

Answer 1

我提出的解决方案：使用计算的 left 值代替 right：

    state('true', style({
        left: 'calc(100% - 200px - 10px)',
    })),
    state('false', style({
        left: '10px',
    })),

plunker

角度2。动画从左到右移动

Angular2. Animating left to right movement

angular

angular-animations