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

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。这是结果。如您所见，即使打印出正确的值，它也不会更新，直到循环中的最后一次传递。所以我有两个问题：这是我的代码有问题，还是您不能做的事情？如果可以更新这样的样式，这是一种不好的做法，为什么？

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>

实际上，您不能，因为您需要从子项的悬停触发父项的属性动画，这是不可能的。

Answer 2

执行 JavaScript 会阻止呈现页面，这仅在代码执行返回到事件循环后发生。

虽然更改样式属性可能会更新 DOM 并影响元素位置和大小的动态计算，但更新屏幕会延迟到脚本完成。这就是为什么您只能看到上次更新的结果。

A1：您不能影响同步 JavaScript 循环内的页面显示。

A2：这不是坏习惯，因为它无法完成:-)