另一个JavaScript错误:向元素添加转换会导致额外的0

Question

使用这几行，我试图向元素添加转换：

transition.style.transform = 'translateY(0)';
transition.style['-webkit-transition'] = 'opacity 0.9s ease-in-out';
setTimeout(() => {
type == 'showContainer' ? transition.style.opacity = 1 :
transition.style.opacity = 0;
}, 100);

但它设定了这样的过渡：

element.style {
transform: translateY(0px);
transition: opacity 0.9s ease-in-out 0s;
opacity: 1;
}

额外的0包括在内，破坏了过渡！！！我该怎么解决这个问题？

我只想添加一个简单的不透明过渡；(

Answer 1

两件事：

要使用样式属性的css名称设置样式属性，请使用style.setProperty(property, value)。要直接用javascript设置它，属性有不同的名称，例如backgroundColor，而不是background-color。

为什么要使用超时？可以直接设置不透明度和过渡。不会有时间问题。

使用transition而不是-webkit-transition。它与所有浏览器都兼容。并且可以直接在样式属性上设置。