我有我的这所有的HTML插入一个div元素。我想在效果上创建一个淡出的时候这个内容div的变化。目前，我的不透明度设置为0，将东西这个div之前，然后将其设置为1，这样效果发生。我的CSS的问题是，对于这两种情况下的作品，无论是从0到1或1到0。有没有一种方法，使之只能从0到1过渡时工作;有没有在单个页面应用程序从一个页面转移到另一个更好的选择？
HTML
<!DOCTYPE html>
<html>
<!-- Imports -->
<body>
<div id="app" class="app"></div>
</body>
</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;
}<div class="app">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!</div>
<button>toggle opacity</button>当你想要它动画只能添加transition财产。我会告诉你如何用两个类来做到这一点。
.app {
background-color:#f8f8f8;
opacity: 0;
}
.app.is-loaded {
transition: all 1s;
-webkit-transition: all 1s;
opacity: 1;
}
...
document.getElementById("app").classList.add('is-loaded');
现在，当您删除类，透明度会不会有一个过渡回0。