Помогите с анимацией scale

439
21 декабря 2016, 03:34

Помогите сделать анимацию чтобы при клике по кнопке див с замедлением появлялся с трансформацией [scale] с еулевого размера увеличивался до своего нормального состояния

Answer 1

$('button').click(function() { 
  $('div').addClass('anim-scale'); 
})
div { 
  transform: scale(0); 
  width: 150px; 
  height: 150px; 
  border-radius: 50%; 
  background-color: tomato; 
  transition: 2s linear; 
} 
div.anim-scale { 
  transform: scale(1); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<button>Button</button> 
<div></div>

Answer 2

Есть ещё вариант одним скриптом. Но вариант soledar10 более практичный, как по мне

$('button').click(function() { 
  $({scale: 0}).animate({scale: 1}, { 
    duration: 1000, // скорость 
    easing: 'linear', 
    step: function(scale) { 
      $('div').css('transform', 'scale('+scale+')') 
    } 
  }); 
})
div { 
  transform: scale(0); 
  width: 150px; 
  height: 150px; 
  border-radius: 50%; 
  background-color: tomato; 
  transition: 2s linear; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Нажми</button> 
<div></div>

READ ALSO
Приоритет наложение слоёв

Приоритет наложение слоёв

Свойство z-index как правило применяется только исключительно к позиционированным элементам (relative, absolute, fixed и тд

430
ios не подгружает css файлы для сайта

ios не подгружает css файлы для сайта

Ребят, запутался совершенно, в браузере все нормна мобилке отлично работает, safari не подключает ни одного стиля, как быть?)

409
Верстка блока с картинками

Верстка блока с картинками

Всем здравствуйте! Не так давно начала осваивать верстку и пока испытываю проблемы с подбором инструментов к задаче

556