Изменение отображения и непрозрачности с CSS анимации

Question

У меня есть следующие кнопки:

HTML:

<button id='foo' style='display: none; opacity: 0'>Foo</button> 

CSS:

#foo { 
     transition: opacity .5s ease-in-out; 
     -moz-transition: opacity .5s ease-in-out; 
     -webkit-transition: opacity .5s ease-in-out; 
    } 

JS:

$('#foo').css('display', ''); 
    $('#foo').css('opacity', ''); 

Он работает в смысл, кнопка появляется, но без анимации. Так что я не уверен, в чем проблема. Есть ли у кого-нибудь идеи?

Кроме того, я не хочу, чтобы предложения касались видимости, потому что здесь дело не в этом. Благодаря !

Answer 1

Вы должны отделить настройки display свойства от установки свойств, участвующих в анимации. Если вы установите их за один раунд, анимация не будет запущена (проблема с display: none). Один из способов - сделать setTimeout.

Кроме того, мое предложение состоит в том, чтобы никогда не изменять свойства стиля из JS, всегда манипулировать классами для лучшего разделения. Что-то, как это будет делать:

var $foo = $('#foo').addClass('display'); 
 
    
 
setTimeout(function() { 
 
    $foo.addClass('show'); 
 
}); 
 

#foo { 
 
    transition: opacity 1s ease-in-out; 
 
    opacity: 0; 
 
    display: none; 
 
} 
 

 
#foo.display { 
 
    display: inline-block; 
 
} 
 

 
#foo.show { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id='foo'>Foo</button>

Answer 2

Основная проблема, которая останавливает ваш пример от работы, заключается в том, что вы меняете состояние элемента display. Удалите настройку display, и ваш код работает нормально: https://jsfiddle.net/RoryMcCrossan/pcp2x53m/

Это, как говорится, есть несколько вопросов. Во-первых, не устанавливайте свойство ''. Существуют значения по умолчанию, для которых они должны быть установлены вместо. Во-вторых, используйте классы, так как это лучше.

Если вам требуется, чтобы элемент был установлен на display: none по умолчанию, вам нужно подождать, пока элемент будет установлен в display: block, прежде чем вы установите его непрозрачность и разрешите переход к началу.

Вот полностью рабочий пример:

$('#foo').show(0, function() { 
    $(this).addClass('fade-in'); 
}); 

#foo { 
    display: none; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out; 
    transition: opacity .5s ease-in-out; 
} 
#foo.fade-in { 
    opacity: 1; 
} 

<button id="foo">Foo</button> 

Example fiddle