动画不透明度和位置

Question

我在CodePen上遇到了这支笔，但遇到了一些问题。 首先，让我们解释一下代码的作用：

在input情况下，有一个forEach循环通过所有的迭代lis和检查匹配正则表达式，则隐藏（或更准确地，动画的opacity为0）的li相应。 然后，它有一个while循环（在forEach循环中），该循环再次遍历所有lis ，并将适当的translateY应用于lis （因为将opacity设置为0不会删除元素）。

问题

1-结果出来了，如果您有200 lis ，它将迭代（200 * 200 =）40,000次！ 我认为效率不是很高。

2-另一个问题是，如果过滤掉一定数量的lis ，滚动条仍然允许您向​​下滚动经过那里，因此向下滚动只能看到任何内容。 在下面的示例中检查此问题。

解决前两个问题的明显方法是设置display: none而不是设置opacity: 0 。 这样，您无需在所有lis重复200次，因为display: none自动删除“空”空间...正如您所猜测的，这也解决了第二个问题。

该解决方案的问题在于display: none动画。

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

CodePen

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

searchElem.addEventListener("input", function() {
    var rgx = new RegExp(this.value.replace(/([.^$|*+?()\[\]{}\\-])/g, "\\$1"), 'i');
    searchArray.forEach(function(el, idx) {
        if (transitionEnd) {
            if (rgx.test(el)) cells[idx].removeAttribute('class');
            else cells[idx].className = 'hidden';

            var i = -1,
                cellPosition = 0;
            while (++i < cellLength) {
                if (cells[i].className != "hidden") 
                    cells[i].style.transform = "translateY(" + (cellPosition++ * cellHeight) + "px)";
            }
        }
    });
});

请没有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 。

以下是我所做的：

• 从li删除了position: absolute ，因为绝对定位意味着所有li都放置在同一点，因此需要平移（ translateY ）以便将它们一个接一个地显示。
• 为li添加了一个固定的高度（ height: 20px ）。 CSS过渡无法将值过渡到auto或从auto过渡，因此我们需要为li赋予固定的高度。 我认为将固定高度设置为适合您的情况，因为它们看起来都像搜索结果，不会换成多行。
• 更改了transition设置以过渡所有属性（或者也可以单独单独过渡高度和不透明度），而不仅仅是不透明度和变换。
• 修改了hidden类的CSS，使其包括height: 0px和overflow: hidden 。 这种测量方式是在元素被隐藏时（它也被隐藏）没有高度，因此避免了对translateY的需求（这是第二个循环的作用）和滚动条的问题。
• 除了需要删除多余的while循环外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演示 （由于字符限制，不再添加代码段）

---

在上面的代码（和演示）中， opacity和height在相同的时间以相同的持续时间进行转换，因此opacity转换没有太大的视觉效果。 如果在height转换开始之前必须看到opacity变化，那么可以像下面的代码中那样在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演示