Question

我正在使用angular 2 rc6，我希望根据路径路径进行页面转换。我在两个路径上应用以下动画（作为测试）。我只想动画不透明度而不是别的。但无论我做什么，我都无法阻止页面在Y轴上进行翻译。我发现似乎有用的唯一选项是使用style.position: absolute作为主机。我不想使用它，因为它会拧紧页面上所有元素的位置。我还尝试过只有opactiy而没有transform。那也行不通。

   host: {
     '[@routeAnimation]': 'true',
     '[style.display]': "'block'"
  },
  animations: [
    trigger('routeAnimation', [

      transition('void => *', [
        style({opacity: 0, transform: 'translatey(0)'}),
        animate('0.2s')
      ]),
      transition('* => void', [
        animate('0.2s', style({opacity: 0, transform: 'translatey(0)'}))
      ])
    ])
  ]

我确信我在这里遗漏了一些东西。不太清楚什么？谢谢您的帮助。

Answer 1

1）正如你所看到的，你拼错了transteY变换X或Y的值。

style({opacity: 0, transform: 'translatey(0)'}),

应该像大写一样：

style({opacity: 0, transform: 'translateY(0)'}),

2）我在你的代码中看到的另一件事是你将你的动画选择器绑定如下：[@routeAnimation]': 'true'如果你在你的html上使用这个选择器，你永远不能通过切换布尔值来打开它，尝试使用类似isMovingY = 'false'的布尔值并将其放置在选择器中，如此[@routeAnimation]': isMovingY现在当您通过单击切换它时，例如它可以激活您在声明中声明的“输入”/“离开”状态动画。

角度2动画未按预期工作

1 个答案: