我正在尝试扩展鼠标所在的网格部分,它全部在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");
}
}
答案 0 :(得分:0)
除Firefox外,其他任何浏览器均未实现网格动画