Question

我试图围绕CSS动画属性。在我目前的代码中，我基本上有这样的结构：

<div>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

li的内部是通过JS生成的，我想做的是为扩展动画，所以它不是那么突然。我附上了

animation: 1s linear;

到最外面的div，但它没有动画。我要做的是在添加/删除li时，包装器的高度应该是动画而不是简单地改变。我一直在浏览各种文档和网站，但我无法弄清楚我是否不理解该属性或我是否使用它错了。

Answer 1

首先，了解CSS中transition和animation之间的区别，以及何时使用每种内容之间的差异。

如果要更改特定属性（transition）或所有属性（transition: opacity .5s, color .5s）的更改，则会使用

transition: all .5s。这样，如果您通过 - 例如 - CSS悬停状态或JavaScript更改opacity之类的属性，则该更改将设置动画。

animation用于将keyframe animation设置为元素，您可以在其中预定义可影响该元素的一个或多个属性的一系列步骤。

您正在请求的动画类型 - 仅在添加或从DOM中删除元素时动画元素 - 仅在CSS中不存在。但是，许多JavaScript库可以在添加/删除元素时智能地添加/删除CSS类，从而允许执行CSS动画。

有了这个说法，有一种方法可以让我们只使用CSS在<li>元素中进行适当的动画处理，让它们以关键帧动画开始。

这是一个现场演示，我正在通过将<li>的每个新0的高度设置为2em（我已指定为line-height }）。请注意，width和height只能转换为指定值，而不是auto。

$('button').on('click', function() {
  $('ul').append('<li>List Item</li>');
});

div {
  border: 1px solid teal;
  border-radius: 4px;
  padding: 1em;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  animation: grow 1s;
  line-height: 2em;
  overflow-y: hidden;
}

@keyframes grow {
  0% {
    height: 0;
  }
  100% {
    height: 2em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <ul>
    <li>List Item</li>
  </ul>
  <button>Add to List</button>
</div>

无法理解CSS动画

1 个答案: