另一個 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 。 它與所有瀏覽器兼容。 並且可以直接在樣式屬性上設置。