CSS Div Переход между классами происходит только в одном направлении

Question

EDIT: Решение найдено.

У меня есть функция 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 медленно
• После SetTimeout протекает ДИВ исчезает мгновенно

Так в чем проблема? Почему это переход, но не выход? Кроме того, пожалуйста, не JQuery, просто придерживайтесь JS и CSS.

Answer 1

Я переписал некоторый класс и анимацию, но база не изменится:

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>

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; 
}