Javascript使用转换和不透明度触发CSS转换在Firefox 71中不起作用

使用Firefox71。 我想触发一个转换，在此转换中，回车按钮（实际上是一个启动的div），

id=target

，从右侧滑入，同时淡入

幻灯片效果很好，但不透明度没有发生。显然，我必须从

JavaScript

触发这个，因为div不在屏幕上，所以

伪类CSS

触发器是无用的

我用一个动画和

@关键帧完成了这项工作，效果很好，但我喜欢简洁的过渡。任何帮助和进一步协助都将不胜感激。
史蒂夫


测试转换
身体{
填充：0；
保证金：0；
字体系列：Arial；
字号：48pt；
框大小：边框框；
}
#目标{
位置：绝对位置；
宽度：200px；
高度：200px；
右：-212px；
底部：200px；
边框：6px实心深蓝色；
边界半径：100px；
不透明度：0；
过渡属性：变换、不透明度；
过渡时间：1s；
过渡时间功能：轻松进入；
}
#内靶{
位置：相对位置；
文本对齐：居中；
}
.开始{
转换：translateX（-412px）；
不透明度：1；
}
发射
输入
让launch=document.getElementById（'launch'）；
让target=document.getElementById（'target'）；
launch.addEventListener（'click'，startAnimation）；
功能启动（e）{
target.classList.toggle（'start'）；
}
这是因为CSS的特殊性。您使用ID
#target
来设置元素的样式，然后应用CSS类
start
使其移动并淡入。
#target
的原始CSS块包含一个起始
不透明度
，但没有起始
转换
。设置
start
类后，在元素上设置
transform
，然后元素移动<代码>不透明度

也已设置，但没有效果。原因是原始的

不透明度

是使用ID设置的，而新的

不透明度

是使用类设置的，在CSS中，ID比类更具体。因此，原始的

不透明度

胜出，什么也没有发生

更改代码以使用类而不是ID设置目标元素的样式：

<div id="target" class="mytarget">
  ...
</div>

---

你的

opacity

转换现在可以工作了（）。

Alexander，你是绝对的明星。因为我混合使用了转换和动画，所以我没有考虑到转换只与类一起工作——是这样吗？转换确实与ID一起工作。然而，类和ID的混合引入了一个特殊性问题。我喜欢使用大多数类，仅当我真的需要从DOM中获取元素时才使用ID。

.mytarget {
  ...
  opacity: 0.0;
  transition-property: transform, opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in;
}