Sina Mirhejazi Sina Mirhejazi - 6 months ago 61
AngularJS Question

Angular JS - Animating md-chips element on enter and leave

I'm trying to animate chips created by md-chips, angular-material, but it does not work.

here is my css codes:

@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

50% {
opacity: 1;
}
}

@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

50% {
opacity: 1;
}
}

@-webkit-keyframes zoomOut {
from {
opacity: 1;
}

50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

to {
opacity: 0;
}
}

@keyframes zoomOut {
from {
opacity: 1;
}

50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

to {
opacity: 0;
}
}
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
.md-chip.ng-leave {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}


and HTML:

<md-chips class="custom-chips" ng-show="elems.length" ng-model="elems" readonly="true">
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
<button md-chip-remove class="md-primary">
<md-icon md-svg-icon="md-close"></md-icon>
</button>
</md-chips>


but no animation showing and everything goes normal!
I read some tutorials and whatever they said step by step but i think it's not gonna work with md-chips work some reasons.

Answer

You need to specify a duration, for example:

.md-chip.ng-enter {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;

    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

Or simply:

.md-chip.ng-enter {
  -webkit-animation: zoomIn 1s;
  animation: zoomIn 1s;
}

Demo: http://plnkr.co/edit/L36jyc3WFW9cRuu4Cybs?p=preview