BackgroundImage 过渡在 Firefox 上不起作用答案

【问题标题】：BackgroundImage transition doesn't work on firefoxBackgroundImage 过渡在 Firefox 上不起作用
【发布时间】：2016-04-22 20:22:12
【问题描述】：

我在 javascript 中使用过渡，但在 firefox 上不起作用，有人知道为什么吗？在谷歌浏览器上很好。这是我的代码：

el.style.backgroundImage = "url('menu.jpg')";
el.style.transition = "background 0.4s";

【问题讨论】：

很好奇您为什么首先将转换放在 Javascript 中？另请参阅stackoverflow.com/questions/19808764/…
因为我想要这个效果 www.kakoum.fr (on menu hover)
你可以把transition放在CSS中，在JS中修改时仍然会出现。另请查看我链接到您的帖子

标签： javascript css firefox transition

【解决方案1】：

遵循@Jeremy 发布的链接上的建议；替换设置 transition 以影响 background-size 为 opacity

div a {
  color: #fff;
  z-Index: 3;
  position: absolute;
}
div:before,
div:after {
  content: " ";
  position: absolute;
  background-repeat: no-repeat;
  display: block;
  width: 50px;
  height: 50px;
  transition: background-size 0.4s;
}
div:before {
  background: #1F1F1F;
  background-size: 100% 100%;
}
div:after {
  background: url(http://lorempixel.com/50/50/nature);
  background-size: 0% 0%;
}
div:hover:before {
  background-size: 0% 0%;
}
div:hover:after {
  background-size: 100% 100%;
}

<div><a href="#">abc</a>
</div>

plnkrhttp://plnkr.co/edit/XJMvtEnuvS1TF1xqIVVQ?p=preview

【讨论】：

@Kakoum 可以创建jsfiddle来演示吗？
@Kakoum 预期的结果是什么？
在 Firefox 和 googlechrome 上查看我的网站 www.kakoum.fr（鼠标在菜单上）