1. ホーム
  2. javascript

[解決済み] jqueryを使用してscale cssプロパティをアニメーション化するにはどうすればよいですか?

2022-02-25 10:06:17

質問

jQueryを使って、ボタンがクリックされたときに、"bubble"というクラスを持つ円形のdivが飛び出すようにしようとしているのです。私はそれが何もないところから表示され、その完全なサイズに成長するようにしたいのですが、私はそれが動作するようにするのに苦労しています。

HTML バブルを表示する ... CSS

.bubble {
    transform: scale(0);
}

ジャバスクリプト

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

解決方法は?

CSSで遷移を行い、アニメーションを開始するためのクラスを追加する「スイッチ」としてJavascriptを使用すればよいのです。これを試してみてください。

$('button').click(function() {
  $('.bubble').toggleClass('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>Toggle</button>
<div class='col-lg-2 col-md-2 well bubble'></div>