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元素

2 个答案: