title: angular ngClass animation hooks
body: <p>I need to play animation on class add/remove. The solution I have so far looks ugly with use of verbose approach with 2 classes. I would be glad to come up with more elegant and clean code.</p>
  
  <p>example: <a href="http://plnkr.co/edit/wvrfP3lIbRmBeSdi99xO?p=preview" rel="nofollow">http://plnkr.co/edit/wvrfP3lIbRmBeSdi99xO?p=preview</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;body ng-app="ngAnimate"&gt;
    &lt;input id="setbtn" type="button" value="set" ng-click="myVar=true"&gt;
  &lt;input id="clearbtn" type="button" value="clear" ng-click="myVar=false"&gt;
  &lt;br&gt;
  &lt;span class="base-class" ng-class="{'my-class1': myVar, 'my-class2': !myVar }"&gt;Sample Text&lt;/span&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.base-class {
    cursor: default;
    display: block;
    background: #dc5d63;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    position: relative;
    height: 77px;
    font-family: Cala-Bold, serif;
    float: left;
  }
  .base-class.my-class1,
  .base-class.my-class2 {
    -moz-animation: 1s slidein ease-out;
    -webkit-animation: 1s slidein ease-out;
    animation: 1s slidein ease-out;
  }
  @-webkit-keyframes slidein {
    from {
      margin-top: -100%;
    }
    to {
      margin-top: 0%;
    }
  }
  
  @-moz-keyframes slidein {
    from {
      margin-top: -100%;
    }
    to {
      margin-top: 0%;
    }
  }
  
  @keyframes slidein {
    from {
      margin-top: -100%;
    }
    to {
      margin-top: 0%;
    }
  }
  </code></pre>