ng-animate-value
v1.0.0
Published
A directive / component to animate value changes on a named property with default or custom styles
Downloads
5
Maintainers
Readme
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.