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

我将添加一个负责过渡的类。如果仅在类中添加过渡规则 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

仅当您要设置动画时，才可以添加prefs = {"profile.default_content_setting_values.plugins" => 1, "profile.content_settings.plugin_whitelist.adobe-flash-player" => 1, "profile.content_settings.exceptions.plugins.*,*.per_resource.adobe-flash-player" => 1, "PluginsAllowedForUrls" => "hendricks-as3.localhost.bbc.co.uk" }属性。我将通过两个课程向您展示如何做到这一点。

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

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

2 个答案: