javascript - 在循环中多次覆盖元素的样式？

Question

我有一个简单的菜单，目前正在使用我想要动画的 CSS 网格。但是，grid-template-columns 不能流畅地设置动画。我现在做的菜单完全不同，但在寻找解决方案的过程中，我遇到了一些我不太明白的事情。我的第一个想法是在 while 循环中更新样式以使元素的大小不断增加，尽管它可能根本不是一个好主意并且可能不是关键帧动画的合适替代方案。它不起作用。

相关JS:

    $('#select-oak').hover(function () {
            let start = new Date().getTime();
            let elapsed = 0;

            while (elapsed <= 1000) {
                elapsed = new Date().getTime() - start;
                let val = elapsed / 1000;

                if (elapsed % 100 === 0) {
                    $('.selector-block').css('grid-template-columns', `${1.0 + val}fr 1fr 1fr 1fr`);
                    console.log(1 + val);
                    console.log(elapsed);
                }
            }
        }

CSS:

.selector-block {
    position: relative;
    overflow: hidden;
    top: -32.5vh;
    background-color: white;
    gap: 5px;
    width: 100vw;
    height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    clip-path: polygon(0 36%, 100% 0, 100% 60%, 0% 100%);
    z-index: 3;
}

#select-oak {
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: rgb(94, 80, 21);
    top: 21.5%;
    width: 100%;
    height: 200%;
}

#select-oak img {
    position: relative;
    left: -10vw;
    transform: scale(1.06);
    filter: blur(5px);
}

#select-oak img:hover {
    filter: none;
    transform: scale(1.1);
    transition: ease-in-out 0.5s;
}

这似乎是一种非常规的方法，所以我对它不起作用并不感到惊讶，但由于我对 CSS、JS 和 JQuery 比较陌生，我很好奇是什么阻止了它的工作，只是为了帮助我对使用 JQuery 和 CSS 的理解。这是结果。如您所见，它直到循环中的最后一次传递才更新，即使打印出正确的值也是如此。

所以我有两个问题:

1. 这是我的代码有问题，还是您做不到？
2. 如果可以像这样更新样式，这是不是一种不好的做法，为什么？

Answer 1

while 循环阻塞了渲染进程，因为它是同步的。

我想到了一种使用 CSS 转换的方法，它与子元素的数量无关。它还处理鼠标离开甚至从一个菜单项移动到另一个菜单项的问题。

$('.selector-block > *').hover(function() {
  let frValues = Array($(this).siblings().length+1).fill('1fr');
  frValues[$(this).prevAll().length] = '2fr';
  $('.selector-block').css({
    'grid-template-columns': frValues.join(' ')
  });
}, function() {
  let frValues = Array($(this).siblings().length+1).fill('1fr');
  $('.selector-block').css({
    'grid-template-columns': frValues.join(' ')
  });
});

.selector-block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  transition: all 1s ease-in-out;
}

.selector-block > * {
  border: solid red 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selector-block"><div id="select-oak">select-oak</div><div>foobar</div><div>baz</div><div>bat</div></div>

如果子元素的数量是固定的，你可以只使用 CSS，而不是 JavaScript，通过 :nth-child() 选择器和 :hover() 也是如此，但是通过这种方式，您可以随时向菜单动态添加元素。 实际上，您不能这样做，因为您需要通过子项的悬停来触发父项的属性动画，这是不可能的。

旧答案:

您正在寻找 window.requestAnimationFrame() .这是它如何工作的基本演示。您必须调整您的值以获得更平滑的过渡，当然还要处理鼠标离开元素的问题。

let start;
let elapsed = 0;
let rafHandle;

function hoverAnimation() {
  if (elapsed <= 1000) {
    elapsed = new Date().getTime() - start;
    let val = elapsed / 1000;

    $('.selector-block').css('grid-template-columns', `${1.0 + val}fr 1fr 1fr 1fr`);
    //console.log(1 + val);
    //console.log(elapsed);
    window.setTimeout(function() {
      rafHandle = window.requestAnimationFrame(hoverAnimation);
    }, 1000/60); // about 60 FPS
  }
}

$('#select-oak').hover(function() {
  start = new Date().getTime();
  elapsed = 0;
  rafHandle = window.requestAnimationFrame(hoverAnimation);
}, function() {
  // handle mouse leave animation here instead
  window.cancelAnimationFrame(rafHandle);
  elapsed = Infinity;
  $('.selector-block').css('grid-template-columns', `1fr 1fr 1fr 1fr`);
});

.selector-block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selector-block"><div id="select-oak">select-oak</div><div>foobar</div><div>baz</div><div>bat</div></div>