Question

我遇到过这个CSS3动画的问题：

@-webkit-keyframes hide_card {
  0% {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 3px;
  }
  100% {
    width: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-width: 0px;
  }
}

@-moz-keyframes hide_card {
  0% {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 3px;
  }
  100% {
    width: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-width: 0px;
  }
}

@-ms-keyframes hide_card {
  0% {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 3px;
  }
  100% {
    width: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-width: 0px;
  }
}

@keyframes hide_card {
  0% {
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 3px;
  }
  100% {
    width: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-width: 0px;
  }
}

这是元素：

.activity .card.invisible {
  width: 0px;
  border-width: 0px;
  margin: 0px;
  opacity: 0;
  -webkit-animation-name: hide_card;
  -moz-animation-name: hide_card;
  animation-name: hide_card;

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

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1; 
}

在我的Javascript中，我使用JQuery添加invisible类，并且元素变为隐藏（并且类在检查器中添加），但它在没有动画的情况下立即执行。

非常感谢任何帮助，我可以根据需要提供更多信息。

Answer 1

是的，您需要在卡片获得.invisible课程之前将动画规则添加到卡片中。所以它看起来像这样我想：

.activity .card {
  transition: all 1s ease 1s;
  width: 250px;
  margin-left: 10px;
  margin-right: 10px;
  border-width: 3px;
}

.activity .card.invisible {
  width: 0px;
  border-width: 0px;
  margin: 0px;
  opacity: 0; 
}

我使用了速记并省略了供应商前缀......

为什么这个CSS3动画会立即发生？

1 个答案: