ng-animate-value

This library provides a component bl-animate-value to animate value changes on a named property with default or custom styles, internally it uses a directive blAnimateValue:

<div class="box"
  blAnimateValue [prop]="prop" [left]="left">
  <div class="inner enter">
    <div class="inner-box" [attr.data-help]="helpEnter">
      {{ propEnter }}
    </div>
  </div>
  <div class="inner leave">
    <div class="inner-box" [attr.data-help]="helpLeave">
      {{ propLeave }}
    </div>
  </div>
</div>

<bl-animate-value
  [prop]="myProperty1"
  [left]="!left"
  [helpLeft]="helpLeft"
  [helpRight]="helpRight">
</bl-animate-value>

<bl-animate-value id="prop1234"
  [prop]="myProperty2"
  [left]="!left"
  [styles]="{background: 'red', height:'2em', width: '2em', borderRadius: '1em'}"
  [stylesInner]="{color: 'white', alignItems:'center', justifyContent:'center'}">
</bl-animate-value>

A Stackblitz demo is available to show the various usage.