[英]Transition effect only working in firefox
我试图扩展鼠标所在的网格部分,它在 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"); } }
除了 Firefox 之外,网格动画还没有在任何其他浏览器中实现
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.