Question

我有一组图像，我的位置绝对彼此相邻。为此，我在每个图像元素上都有：

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

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

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)'
  })),

单击图像时，此功能正常。但是，当我再次点击图片时，我会转换＆＃39;点击＆＃39; =＆gt;＆＃39;可见＆＃39;。由于[ngStyle]被＆＃39;点击＆＃39;覆盖。造型，当它回到可见的＆＃39;状态，[ngStyle]应用的左侧和顶部样式消失了，每个图像都只是左上角。

我尝试的事情：

1）动画中的变量 - ＆gt;不受角度支持

2）拦截动画的回调开始＆＃39;点击＆＃39; =＆gt;＆＃39;可见＆＃39;并在元素上重新添加顶部和左侧样式=＆gt;这只会在动画结束后添加样式。因此图像移动到左上角然后跳回到它的位置（ew）

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

动画结束后，Angular 2重新应用[ngStyle]

0 个答案: