Привет, друзья!
Есть div, который я анимирую в определенное место на странице.
для анимации использую css transform: scale, top, left при выставленном transition: all 2s;
Проблема в том, что если задать все три свойства одновременно, то первая анимация происходит с заметными рывками. Вопрос в том, как сделать анимацию плавной без рывков? Метод анимации не имеет значения. Имеет значение, чтобы анимируемый элемент сохраняя пропорции анимированно уместился в сайдбаре.
Есть особенность, может кто сможет осмыслить: если в codepen'е потянуть за границу окна просмотра результата, сделав небольшой resize, то первая анимация будет плавной.
set_random_propites_for_div();
function set_random_propites_for_div(){
var random_width = Math.floor((Math.random() * 150) + 350);
var random_height = Math.floor((Math.random() * 100) + 250);
var random_top = Math.floor((Math.random() * 1) + 100);
var random_left = Math.floor((Math.random() * 100) + 300);
$('#random_div_1').css('width', random_width+'px').css('height', random_height+'px').css('top', random_top+'px').css('left', random_left+'px');
}
var start_width = $('#random_div_1').outerWidth();
var finish_width = $('#sidebar').outerWidth() - 10;
var offset = $('#random_div_1').offset();
var start_offset_left = offset.left;
var start_offset_top = offset.top;
var finish_offset_left = 5;
var finish_offset_top = 5;
var delta_offset_left = start_offset_left-finish_offset_left;
var delta_offset_top = start_offset_top-finish_offset_top;
var scale = finish_width/start_width;
function animate_div(){
$('#random_div_1').css({
transform: 'scale('+scale+')',
left: finish_offset_left+'px',
top: finish_offset_top+'px'
});
}
function re_animate_div(){
$('#random_div_1').css({
transform: 'scale(1)',
left: start_offset_left+'px',
top: start_offset_top+'px'
});
}
$('#start_animate').click(function(){
animate_div();
});
$('#back_animate').click(function(){
re_animate_div();
});
#wrapper{
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#start_animate, #back_animate{
padding: 10px;
border-radius: 10px;
background-color: white;
text-align: center;
width: 100px;
position: absolute;
top: 10px;
cursor: pointer;
}
#start_animate{
left: 200px;
}
#back_animate{
left: 350px;
}
#sidebar{
position: relative;
width: 100px;
height: 100%;
background-color: black;
opacity: 0.2;
}
#random_div_1{
position: absolute;
will-change: transform, top, left;
transition: all 1s;
transform-origin: top left;
background-color: green;
font-size: 140px;
color: white;
font-family: Verdana;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="start_animate">start animate</div>
<div id="back_animate">back animate</div>
<div id="sidebar"></div>
<div id="random_div_1">
<div id="text">ABC</div>
</div>
</div>
