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

我会添加一个负责转换的类。 如果你只只在类中添加转换规则，你会得到的单向转变你后：

 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属性。 我将向您展示如何使用两个类来做到这一点。

.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 。

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

问题描述

2 个解决方案

解决方案1
11 已采纳 2019-02-11 20:22:47

解决方案2
3 2019-02-11 20:26:57

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

问题描述

2 个解决方案

解决方案1 11 已采纳 2019-02-11 20:22:47

解决方案2 3 2019-02-11 20:26:57

解决方案1
11 已采纳 2019-02-11 20:22:47

解决方案2
3 2019-02-11 20:26:57