Как анимировать сдвиг блока, при появлении блока рядом?

Question

[Иван Ерохин]

Есть блок (display:table-cell;vertical-align:middle;) , который расположен внутри блок с display: table;

При нажатии на кнопку внутри блока, снизу появляется блок текста (display:none -> display:block), блок сверху сдвигается с центра под верх странички. Суммарно с текстом они остаются по центру.

Код JQUERRY

$('.more1').click(function(){
	$('.mt1').toggleClass('open', 500, "easeOutSine"); //класс на кнопке
	$('.more_text1').addClass('animated slideInUp'); //анимация появления текста (animated.css)
	$('.more_text1').fadeToggle(500);	//появление блока текстового
});

Вот например что-то похожее https://codepen.io/anon/pen/BYdLMq. При нажатии на кнопку, кнопка растгивается мгновенно, как сделато это плавно?

Answer 1

[maxsnw]

запомни, что через css анимацию плюс дисплей блок\нон, транзишн не будет работать, он будет работать только с опасити. Через скрипт возможно задать плавное появление, но оно тоже, насколько мне известно не очень работает.
$(".element").fadeOut(300, function(){$(this).removeClass("open", 300)});

Answer 2

[Дима Долготер]

Transition width 0.5s linear

Comments

[Иван Ерохин]

Уже стоит. не работает так

Answer 3

[kally]

.gallery{
        width: 100px;				
        opacity: 0;
        transition: all 2s;	/*  all-что именно меняется, 2s-скорость в секундах  */	
}

.gallery-1{
        width: 300px;				
        opacity: 0;	
}