首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >设置和元素的不透明度,然后对其进行动画处理-所有这些都使用JS

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

Stack Overflow用户
提问于 2018-06-10 00:36:35
回答 1查看 22关注 0票数 0

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

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

this.newContainer.style.opacity = 0;

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

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

这是.animate-in的CSS

代码语言:javascript
复制
.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规则。这是我的问题。我该如何解决这个问题呢?

EN

回答 1

Stack Overflow用户

发布于 2018-06-10 00:51:45

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

代码语言:javascript
复制
 .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;
        }
    }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50776387

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档