How to use Angular to activate CSS Animation on button click?

Question

I want to use an Angular function to activate a Css animation. I have searched for ways to do this but Im really confused on how to do it in my case. I wish to have the div "slide1" to slide horizontally to the right when one of the buttons "B1" OR "B2" is clicked.

This is my Angular function:

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

        }
      }
  }
})

My slide div css is:

.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);
  }
}

Any help with how I can get the Slide1 div to move on click with my Angular function?

Answer 1

An easy way to do this is to add the class to the div dynamically.

And one way to do that would be something like:

<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>

Clicking either button will toggle the doSlide value. When doSlide is true the slide1 class is added to the div.

Note: it is not necessary to define doSlide in the controller, Angular will automatically add it to the scope.