Javascript 角度8动态动画

Hi有一个div，它有6个元素，左右两个按钮，如下图所示

点击左键，我必须像这样设置动画

Remove --> Right to Left
Add --> Left  to Right

Remove --> Left to Right
Add --> Right to Left

另外，点击右键图标也要像动画一样

Remove --> Right to Left
Add --> Left  to Right

Remove --> Left to Right
Add --> Right to Left

下面是我的代码，用于设置右按钮的动画，但如何反之亦然

我的动画逻辑

动画：[
触发器（“slideInOut”[
转换（“：输入”[
样式（{transform:“translateX（100%）”}），
动画（“400ms放松”，风格（{transform:“translateX（0%）”}））
]),
过渡（“：离开”[
动画（“400ms放松”，风格（{transform:“translateX（-100%）”}））
])
])
];

各自的HTML

{{obj.Date}日期：'dd/MM/yyyy'}
活动：{obj.ConnSoc}
非活动：{obj.nonconsoc}
在前面导航
导航到下一个

我只需要做动画 从左到右单击右按钮，然后 从右到左单击左按钮

感谢您的帮助。

有关演示：

希望这会有所帮助

html:

CSS:

---

要实现此行为，您可以参考此链接

您需要做的只是将动画从

carouselAnimation

更改为

slideInOut

或根据需要更改任何动画

---

还请记住，您必须创建一个策略，以便在单击左右按钮时从控制器更换卡，这种行为不能仅通过更换

SocConnArray

中的元素来实现。您必须预渲染所有ui视图，单击左右按钮时，您必须隐藏当前显示的视图并显示新视图，这将自动执行动画。

您提供的代码可以工作，但在使用角度动画时，这是一个不可取的代码。

.right-to-left{

  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  position:absolute;
}

.left-to-right{

  transform: translate(3em,0);
  -webkit-transform: translate(3em,0);
  -moz-transform: translate(3em,0);
  -o-transform: translate(3em,0);
  -ms-transform: translate(3em,0);
}