CSS 仅从 0 到 1 的过渡不透明度，或替代过渡效果

Question

我有一个 div 元素，其中插入了我所有的 HTML。当此 div 的内容发生变化时，我想创建淡入淡出效果。目前，我在向 div 插入内容之前将不透明度设置为 0，然后将其设置为 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）效果。

Answer 1

我要添加一个 class 负责转换。如果您只在 class 中添加转换规则 only，您将获得您想要的单向转换：

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>

Answer 2

您可以仅在需要动画时添加 transition 属性。我将向您展示如何使用两个 classes 完成此操作。

.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');

现在，当您删除 class 时，不透明度将不会过渡回 0。

CSS 仅从 0 到 1 的过渡不透明度，或替代过渡效果

CSS transition opacity only from 0 to 1, or alternative transition effect

html

javascript

css

css-transitions