Angular JS - 動畫md-chips元素進入和離開

Question

我試圖通過md-chips，angular-material創建的動畫片，但它不起作用。

這裏是我的CSS代碼：

@-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; 
} 

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

但沒有動畫顯示和一切正常！ 我看了一些教程，不管他們如何一步一步說，但我認爲它不會與md-chips工作的一些原因。

Answer 1

你需要指定一個期限，例如：

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

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

或者乾脆：

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

演示：http://plnkr.co/edit/L36jyc3WFW9cRuu4Cybs?p=preview

Answer 2

爲了詳細說明tasseKATT的答案，如果添加max-height財產到動畫去從max-height: 0px;到max-height: 50px; （例如），那麼當一行中的最後一個芯片被移除時，或者當另一個芯片被添加並且創建另一行時，內容將不會如此跳躍。

下面的CSS

看樣和Plunker的演示（只是一個叉）：

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

     50% { 
      max-height: 50px; 
      opacity: 1; 
     } 
    } 

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

     50% { 
      max-height: 50px; 
      opacity: 1; 
     } 
    } 

    @-webkit-keyframes zoomOut { 
     from { 
      max-height: 50px; 
      opacity: 1; 
     } 

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

     to { 
      max-height: 0px; 
      opacity: 0; 
     } 
    } 

    @keyframes zoomOut { 
     from { 
      max-height: 50px; 
      opacity: 1; 
     } 

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

     to { 
      max-height: 0px; 
      opacity: 0; 
     } 
    } 

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

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

    .md-chip.ng-leave { 
     -webkit-animation-name: zoomOut; 
     animation-name: zoomOut; 

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