我有一组图像，我的位置绝对是彼此相邻的 . 要做到这一点，我有每个图像元素：

[ngStyle]="{
      'left': ((i % 5)*150) + 'px',
      'top': (Math.floor(i / 5)*150) + 'px'
    }"

我在哪里索引 . 单击其中一个图像时，它将被带到页面的中心 . 为此，我在组件中有以下动画状态：

state('visible', style({
    opacity: 1,
    transform: 'scale(1)',
    'z-index': 0,
    'box-shadow': 'none',
    'transform-origin': 'initial'
  })),
state('clicked',style({
    transform: 'scale(3)',
    'transform-origin': '0 0',
    top: '25px',
    left: '150px',
    opacity: 1,
    'z-index': 2,
    'box-shadow': '0 0 20px 10px rgba(0,0,0,0.4)'
  })),

单击图像时可以使用此功能 . 但是，当我再次点击图像时，我会转换'clicked'=>'visible' . 由于[ngStyle]被'clicked'样式覆盖，当它返回'visible'状态时，[ngStyle]应用的左侧和顶部样式消失了，每个图像都只是左上角 .

我试过的事情：

1）动画中的变量 - >不受角度支持

2）拦截动画的回调，开始'clicked'=>'visible'并重新添加元素的左上和左侧样式=>这只会在动画结束后添加样式 . 所以图像移动到左上角然后跳回到它的位置（ew）

3）不对默认图像使用绝对位置=>然后当我将图像移动到页面中间时，每个其他元素跳起一个坏的 .

angular css-animations