Как оживить свойство css с помощью jquery?

Я пытаюсь получить круг div с классом "пузырь", который нужно щелкнуть при нажатии кнопки с помощью jQuery. Я хочу, чтобы он появился из ничего и вырос до его полного размера, но у меня возникли проблемы с его работой. heres мой код:

HTML Показать пузырь ... CSS

.bubble {
    transform: scale(0);
}

Javascript

 $('button').click(function(){
     $('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
 });

Ответ 1

Вы можете выполнить переход с помощью CSS, а затем просто использовать Javascript как "переключатель", который добавляет класс для запуска анимации. Попробуйте следующее:

$('button').click(function() {
	$('.bubble').addClass('animate');
})

.bubble {
    transform: scale(0);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: #C00;
    transition: all 5s;
}
.bubble.animate {
    transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Inflate!</button>

<div class='col-lg-2 col-md-2 well bubble'></div>

Ответ 2

В настоящее время вы не можете использовать animate с свойством transform здесь

Однако вы можете добавить значение css transition и изменить сам css.

var scale = 1;
setInterval(function(){
  scale = scale == 1 ? 2 : 1
  $('.circle').css('transform', 'scale('+scale+')')
}, 1000)

.circle {
  margin: 20px auto;
  background-color: blue;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  transform: scale(1);
  transition: transform 250ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>

Ответ 3

Лучше пойдите с анимацией CSS3. Для анимации с частым интервалом вы можете использовать браузер с префиксами (-webkit, -moz и т.д.) -

.bubble:hover{animation:fullScale 5s;}
@keyframe fullScale{
    from{
        transform:scale(0);
    }
    to{
        transform:scale(1);
    }
}

Обратитесь к этой ссылке- http://www.w3schools.com/css/css3_animations.asp

Или приведенное выше решение by @Rory также является хорошим способом добавления класса в прикрепленное событие.

Ответ 4

Вы можете использовать Velocity.js. http://velocityjs.org/ Например:

$("div").velocity({
  "opacity" : 0,
  "scale" : 0.0001
},1800)