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

CSS Div Transition between classes only happening one way

本文关键字：一种 方式发 Div 之间 转换 CSS      更新时间：2024-02-06

编辑：已找到解决方案。

我有一个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
  • 在设置超时运行其过程后，div 会慢慢缓和

什么不起作用，什么确实有效：

  • 调用该函数时会慢慢缓解div
  • 设置超时运行后，div 立即消失

那么问题出在哪里呢？为什么它会过渡到而不是向外过渡？另外，请不要使用Jquery，只需坚持使用JS和CSS。

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

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;
}
<div id="uiLog">  
</div>

transition: all .5s ease;只会给你 in 的过渡效果，但对于两个 in，你使用 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;
}
相关文章：