Question

我正在使用正在使用页面转换的新网站。旧内容消失，新内容消失 - 至少应该发生什么。

加载新内容时，我使用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会完全覆盖任何不透明的CSS规则。这是我的问题。我该如何解决这个问题？

Answer 1

尝试使用css动画并删除代码 - ＆gt; this.newContainer.style.opacity = 0;

 .wrapper.animate-in {
        opacity: 1;
        transition: all 1000ms ease-in-out;
        animation: animate-in01 1s;
        animation-iteration-count: 1;
  }

    @keyframes animate-in01{
        0% {
           opacity: 0;
        }        
        100% {
            opacity: 1;
        }
    }

设置和元素的不透明度，然后设置动画 - 所有这些都使用JS

1 个答案: