问设置和元素的不透明度，然后对其进行动画处理-所有这些都使用JS

EN

我在一个使用页面过渡的新网站上工作。旧内容淡出，新内容淡入--至少这是应该发生的事情。

加载新内容时，我使用JS设置它的不透明度:0

this.newContainer.style.opacity = 0;

然后，我添加了一个新类，以便可以使用CSS转换

this.newContainer.classList.add("animate-in");

这是.animate-in的CSS

.wrapper.animate-in {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

然而，这不起作用。代码不会将不透明度设置为从0到1。相反，它是向后设置动画，从1到0。看起来classList.add没有听到前一行代码。

有人知道怎么解决这个问题吗？

编辑

好了，我了解到使用JS将完全覆盖任何不透明style.opacity规则。这是我的问题。我该如何解决这个问题呢？