hide/show element with add/removeClass with CSS transition

Question

Я хотел бы скрыть/показать элемент с помощью addClass и removeClass с анимацией CSS. Я пробовал таким образом, но когда я добавляю, активный «дисплей» не отображается.

.hidden { 
    display: none; 
    -webkit-transition: display .5s ease; 
    -moz-transition: display .5s ease; 
    -o-transition: display .5s ease; 
} 

.active { 
    transition: display .5s ease; 
    -webkit-transition: display .5s ease; 
    -moz-transition: display .5s ease; 
    -o-transition: display .5s ease; 
} 

#test { 
    width: 100px; 
    height: 40px; 
    background: red; 
} 

-

$('#btn').on('click', function(){ 
    $('#test').toggleClass('active'); 
}); 

-

<div id="test" class="hidden">Hallo!</div> 
<input type="button" id="btn" value="show/hide"> 

jsfiddle

Как я мог это сделать? спасибо

Answer 1

Я думаю, что это лучше решить с помощью jquery, а не css перехода. Если вы просто хотите показать и скрыть элемент, просто вы можете использовать jquery fadeIn и fadeOut без какого-либо правила css.

$('#btn').on('click', function(){ 
    $('#test').fadeToggle("slow"); 
}); 

Here is the updated fiddle.

Для получения дополнительной информации о fadeToggle, refer to this link.

Answer 2

Вы должны добавить некоторые CSS код в свой .active класс, поместите это в CSS раздел, здесь обновленный fiddle:

display : block; 

Answer 3

Вы должны удалить существующий класс hidden из DIV , так как у скрытого дисплея нет ни одного, который останавливает его отображение.
Добавьте это в JQuery внутри onclick кнопки.

$('#test').removeClass('hidden'); 

Answer 4

Вот еще один способ с помощью CSS:

Это не является совершенным вы хотите, но ближе к тому, что:

.hidden { 
    display:none; 
    opacity:0; 

} 

.active { 
    display: block; 
    opacity:1; 
    -webkit-animation-name: fadeIn; 
-webkit-animation-duration: .5s; 
animation-name: fadeIn; 
animation-duration: .5s; 
} 

#test { 
    width: 100px; 
    height: 40px; 
    background: red; 
} 

@-webkit-keyframes fadeIn { 
0% { opacity: 0; } 
20% { opacity: 0; } 
40% { opacity: 0.3; } 
60% { opacity: 0.5; } 
80% { opacity: 0.9; } 
100% { opacity: 1; } 
} 

@keyframes fadeIn { 
0% { opacity: 0; } 
20% { opacity: 0; } 
40% { opacity: 0.3; } 
60% { opacity: 0.5; } 
80% { opacity: 0.9; } 
100% { opacity: 1; } 
} 

Fiddle. Проверить

Надеются, что это поможет.

Answer 5

Попробуйте это:

$('#btn').on('click',function(){ 
var class= $('#test').attr('class').trim(); 
if(class === "hidden") 
{ 
$('#test').removeClass('hidden'); 
$('#test').addClass('active'); 
} 
else 
{ 
$('#test').removeClass('active'); 
$('#test').addClass('hidden'); 
} 
}); 

Answer 6

Вы можете достичь того же эффекта без использования такой длинный CSS

Все, что вам нужно сделать, это добавить Jquery

$('#btn').on('click', function() { 
    $("#test").fadeToggle("slow", "linear") 
}); 

проверить это fiddle

Answer 7

Немного поздно для этой темы, но это может быть полезно. Вы не можете перейти на дисплей, но вы можете использовать переход z-index. Итак, в CSS, установите свой элемент, который вы хотите отобразить с непрозрачностью 0, и установите z-index в -1, чтобы он не показывался независимо от отображаемого значения.Если вы хотите, чтобы отобразить элемент добавить класс, переходы к непрозрачности 1 и Z-индекс> 0:

Например:

#myElement { 
    z-index: -1; 
    opacity:0; 
    transition: all 2s; 
} 
#myElement.showme{ 
    z-index: 99; 
    opacity:0; 
    transition: all 2s; 
} 

, чтобы показать/скрыть это использовать JavaScript, чтобы добавить или удалить класс ShowMe (JQuery ниже):

$('#myElement').addClass('showme'); // fade myElement in 
... 
$('#myElement').removeClass('showme'); // fade out myElement