我有一个div元素，其中插入了我所有的html。当这个div的内容改变时，我想创建一个淡入效果。目前，我将不透明度设置为0，然后再向这个div插入一些内容，然后将其设置为1，这样效果才会发生。我的css的问题是这两种情况都适用，无论是从0到1还是从1到0。是否有方法使其仅在从0过渡到1时才起作用；是否有更好的方法在单页应用程序中从一页过渡到另一页？
HTML
CSS
.app
{
background-color:#f8f8f8;
opacity:0;
transition: all 1s;
-webkit-transition: all 1s;
}
JavaScript
当页面加载时，不透明度设置为1，并且效果发生：
document.getElementById("app").style.opacity='1';
当加载另一个页面时出现问题，此时不透明度设置为0，从而使转换再次生效。
编辑
更新了对问题的更好解释：
元素的不透明度不会改变。我想要的不透明性只在从0到1时起作用，这样在我插入新内容之前就被设置为0(这样就产生了效果，这就是问题所在)，当所有数据都被插入时，就会产生淡入(不透明性从0到1)效果。
最佳答案：
我将添加一个负责转换的类。如果只在类中添加转换规则，则将获得您要执行的单向转换：document.querySelector('button').addEventListener('click', () => {
document.querySelector('.app').classList.toggle('change');
});
.app {
background-color:#f8f8f8;
opacity:0;
}
.app.change {
opacity: 1;
transition: all 1s;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nesciunt adipisci, ab ea deleniti ullam eius alias aperiam, explicabo dolore nihil, ex dolores perferendis. Commodi ipsa dignissimos magni consectetur soluta!
toggle opacity
