Javascript 如何使用Angular在单击按钮时激活CSS动画？

我想使用一个角度函数来激活Css动画。我一直在寻找方法来做到这一点，但我真的很困惑如何在我的情况下做到这一点。我希望在单击其中一个按钮“B1”或“B2”时，使div“slide1”水平向右滑动

这是我的角函数：

directive('click2', () => {
  return{
    restrict: 'A',
      link: (scope) => {
        scope.clicked = () => {

        }
      }
  }
})

我的幻灯片分区css是：

.slide1 {
  bottom: -500px;
  width: 30%;
  //min-width: 275px;
  height: 50%;
  min-height: 390px;
  box-sizing: border-box;
  position: relative;
  content: '';
  background: #a2e0f7;
  animation:nudge 5s linear alternate;
}

@keyframes nudge {
  0%{
    right: 500px;
  };
  100% {
    transform: translate(500px);
   }
  50% {

    transform: translate(0,0);
  }
}

---

关于如何使用角度函数使Slide1 div在单击时移动，有什么帮助吗？

一个简单的方法是动态地将类添加到

div

其中一种方法是：

<div ng-controller="MyCtrl">
  <button ng-click="doSlide = !doSlide">A</button>
  <button ng-click="doSlide = !doSlide">B</button>
  <div ng-class="{'slide1': doSlide}">Click a button to move me</div>
</div>

A.
B
单击一个按钮来移动我

单击任一按钮将切换

doSlide

值。当

doSlide

为

true

时，将

slide1

类添加到

div

---

注意：无需在控制器中定义

doSlide

，Angular将自动将其添加到范围中。

一种简单的方法是动态地将类添加到

div

其中一种方法是：

<div ng-controller="MyCtrl">
  <button ng-click="doSlide = !doSlide">A</button>
  <button ng-click="doSlide = !doSlide">B</button>
  <div ng-class="{'slide1': doSlide}">Click a button to move me</div>
</div>

A.
B
单击一个按钮来移动我

单击任一按钮将切换

doSlide

值。当

doSlide

为

true

时，将

slide1

类添加到

div

注意：无需在控制器中定义

doSlide

，Angular将自动将其添加到范围中