我在一个使用页面过渡的新网站上工作。旧内容淡出,新内容淡入--至少这是应该发生的事情。
加载新内容时,我使用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规则。这是我的问题。我该如何解决这个问题呢?
发布于 2018-06-10 00:51:45
尝试使用css动画并删除代码--> 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;
}
}
https://stackoverflow.com/questions/50776387
复制相似问题