Question

编辑：已找到解决方案。

我有一个Javascript函数，让div出现，然后在几秒后消失。但是，我希望div能够过渡，以便它平滑而且不会再出现并瞬间消失。我已经让它工作......部分。调用该函数时，div会平滑显示，但在没有转换的情况下会消失。我做了很多故障排除而没有成功，并寻找了许多没有帮助的解决方案。

这是我的HTML：

<div id="uiLog" class="ui_hidden">
</div>

使用Javascript：

var ui = function () {
}

ui.log = function (message) {
 document.getElementById('uiLog').innerHTML += (message+"<br>");
 clearTimeout(uiTimeout);
 document.getElementById('uiLog').className = 'uiLog_shown';
  uiTimeout = setTimeout(function() {
     document.getElementById('uiLog').className = 'ui_hidden';
     document.getElementById('uiLog').innerHTML = ("");
      }, 2000);
}

最后，CSS :(删除不必要的部分以便于查看）

  .uiLog_shown {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 100;
    position: fixed;
    overflow:hidden;
    top: 1em;
    right: 1em;
    padding: 7px;
    border color: #271a0c;
    border-style: solid;
    max-width: 15%;
  }

.ui_hidden {
 top: -500px;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;
 position: absolute;
}

我想要的是什么：

调用时的函数缓慢缓解div
在setTimeout运行之后，div缓慢缓慢

什么不行，什么不起作用：

调用时的函数缓慢缓解div
在setTimeout运行之后，div立即消失

那么问题是什么？它为什么要过渡而不是过渡？另外，请不要Jquery，只要坚持使用JS和CSS。

Answer 1

我重写了一些类和动画，但基础没有改变：

var oShell = new ActiveXObject("WScript.Shell");
sRegVal = 'HKEY_CURRENT_USER\\Software\\Microsoft\\Windows NT\\CurrentVersion\\Windows\\Device';

var sName = oShell.RegRead(sRegVal)

var ui = function () {};

var uiTimeout;

ui.log = function (message) {
    clearTimeout(uiTimeout);
    document.getElementById('uiLog').innerHTML = (message);
    document.getElementById('uiLog').className = 'ui_shown';
    uiTimeout = setTimeout(function() {
        document.getElementById('uiLog').className = 'ui_hidden';
    }, 2500);
}

setTimeout(function() {
    ui.log('Test')
}, 500);

#uiLog {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 100;
    position: fixed;
    overflow: hidden;
    top: 1em;
    padding: 7px;
    border-color: #271a0c;
    border-style: solid;
    max-width: 15%;
    opacity: 0;
}

#uiLog.ui_shown {
    opacity: 1;
}

#uiLog.ui_hidden {
    opacity: 0;
}

Answer 2

transition: all .5s ease;只会为您提供转换效果，但对于您和transition: all .5s ease-in-out;

 .uiLog_shown {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    z-index: 100;
    position: fixed;
    overflow:hidden;
    top: 1em;
    right: 1em;
    padding: 7px;
    border color: #271a0c;
    border-style: solid;
    max-width: 15%;
  }

.ui_hidden {
 top: -500px;
 -webkit-transition: all .5s ease-in-out;
 -moz-transition: all .5s ease-in-out;
 -o-transition: all .5s ease-in-out;
 transition: all .5s ease-in-out;
 position: absolute;
}

CSS Div类之间的转换仅以一种方式发生

2 个答案: