@dero
о себе

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

Есть блок (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. При нажатии на кнопку, кнопка растгивается мгновенно, как сделато это плавно?
  • Вопрос задан
  • 152 просмотра
Пригласить эксперта
Ответы на вопрос 3
@maxsnw
запомни, что через css анимацию плюс дисплей блок\нон, транзишн не будет работать, он будет работать только с опасити. Через скрипт возможно задать плавное появление, но оно тоже, насколько мне известно не очень работает.
$(".element").fadeOut(300, function(){$(this).removeClass("open", 300)});
Ответ написан
DDolgy
@DDolgy
Распи***й
Transition width 0.5s linear
Ответ написан
@kally
.gallery{
        width: 100px;				
        opacity: 0;
        transition: all 2s;	/*  all-что именно меняется, 2s-скорость в секундах  */	
}

.gallery-1{
        width: 300px;				
        opacity: 0;	
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы