Question

我遇到this pen at CodePen，我有几个问题。首先让我们解释代码的作用：

在input事件中，有一个forEach循环遍历所有lis并检查匹配的正则表达式，然后隐藏（或更准确地说，为{{1}设置动画因此，{0}} opacity。然后它有一个li循环（在while循环中），再次再次遍历所有forEach并将适当的lis应用于{ {1}}（因为将translateY设置为0不会删除元素。）

问题

1 - 所以它出来了，如果你有200 lis，它会迭代（200 * 200 =）40,000次！我不认为这非常有效。

2 - 另一个问题是，如果过滤掉一定数量的opacity滚动条仍然允许您向下滚动过去的那些内容，那么向下滚动只会看不到任何内容。请在下面的示例中查看此问题。

前两个问题的明显解决方案是设置lis而不是设置lis。这样你就不必重复所有display: none 200次，因为opacity: 0会自动删除'空'空间......正如你所猜测的那样，它也解决了第二个问题。

该解决方案的问题是lis没有动画。

如何在不遇到上述问题的情况下实现相同的动画？

CodePen

（由于字符数限制，无法插入代码段。以下是相关的JavaScript代码：）

display: none

请不要jQuery答案。

Answer 1

@DarkFalcon您需要特定于浏览器的动画属性，例如：

     -webkit-animation: KEYFRAME-NAME 3s infinite;
}

@-webkit-keyframes KEYFRAME-NAME {
0%   { opacity: 0; }
50%  {opacity:.3;}
100% { opacity: 1; }

Answer 2

通过避免li元素的绝对定位并转换height li及其opacity，可以避免滚动条问题和重复循环。

以下是我所做的：

从position: absolute移除li，因为绝对定位意味着所有li都放在同一点，因此需要翻译（translateY）才能它们一个接一个地显示出来。
为height: 20px添加了固定高度（li）。 CSS过渡不能将值转换为auto / from auto，因此我们需要为li提供固定的高度。我认为设置一个固定的高度应该适用于你的情况，因为它们看起来都像搜索结果，不会换行到多行。
更改了transition设置以转换所有属性（或者您也可以单独转换高度和不透明度），而不仅仅是不透明度和变换。
修改了hidden班级＆＃39; CSS包含height: 0px和overflow: hidden。这个元素在被隐藏时没有高度（溢出也被隐藏），因此需要translateY（这是第二个循环所做的）和滚动条的问题。
除了需要删除额外的while循环外，没有JS更改。这是因为添加hidden类会自动产生淡入淡出和上移效果。

li {
  list-style-type: none;
  height: 20px; /* fixed height, set whatever is fit for your case */
  transition: all .5s ease-in-out;
}
.hidden {
  opacity: 0; /* produces the fade effect */
  height: 0px; /* transition height to 0px to produce move up effect */
  overflow: hidden; /* avoids the text from showing through when height is 0 */
}

CodePen Demo（由于字符数限制限制，未再添加代码段）

在上面的代码（和演示）中，opacity和height同时转换为相同的持续时间，因此opacity转换没有太大的视觉效果。如果在opacity转换开始之前必须显示height更改，请在height转换中添加延迟，如下面的代码所示：

li {
  list-style-type: none;
  height: 20px;
  transition: opacity .5s ease-in-out, height .5s ease-in-out .1s;
}

在原始代码段中，li项会在加载时滑入其位置，如果您需要相同的效果，可以通过在开始时将class='hidden'设置为所有li来生成然后用JS删除该类。

CodePen Demo

动画不透明度和位置

CodePen

2 个答案: