Angular JS - 在进入和离开时动画 md-chips 元素
Angular JS - Animating md-chips element on enter and leave
我正在尝试为 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 工作某些原因。
您需要指定时长,例如:
.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;
}
为了详细说明 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;
}
我正在尝试为 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 工作某些原因。
您需要指定时长,例如:
.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;
}
为了详细说明 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;
}