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

Angular JS - 在进入和离开时动画 md-chips 元素

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

angularjs

angular-material

ng-animate