javascript - 过渡效果仅在 Firefox 中有效

Question

我试图扩展鼠标所在的网格部分，它在 Firefox 中都可以工作，但在任何其他浏览器中都不起作用，但奇怪的是网格部分是扩展的，但没有显示过渡，所以它只是扩展超级快我尝试只使用 css 但它不起作用它只适用于 firefox

grid = document.getElementsByClassName('grid-container')[0];
firstItem = grid.children[0];
secondItem = grid.children[1];
thirdItem = grid.children[2];

if(window.matchMedia("(min-width: 768px)").matches){
    var itemTouch = (item) => {
        grid.style.transition = "grid-template-columns 0.5s ease";
        if(item == firstItem)
            grid.style.gridTemplateColumns = '0.25fr 0.15fr 0.15fr';
        if(item == secondItem)
            grid.style.gridTemplateColumns = '0.15fr 0.25fr 0.15fr';
        if(item == thirdItem)
            grid.style.gridTemplateColumns = '0.15fr 0.15fr 0.25fr';
    }

    var standardGrid = () => {
        grid.style.gridTemplateColumns = '0.2fr 0.2fr 0.2fr';
    }
}
else{
    const items = [firstItem, secondItem, thirdItem];
    for (let i = 0; i < items.length; i++){
        items[i].removeAttribute("onmouseenter");
        items[i].removeAttribute("onmouseleave");
    }
}

代码在这里

标签： javascripthtmlcssgridtransition

Answer 1

网格动画尚未在除 Firefox 之外的任何其他浏览器中实现