JQueryを使用してボタンがクリックされたときにポップアップする「バブル」のクラスを持つサークルdivを作成しようとしています。何もないところから現れてフルサイズに成長させたいのですが、動作させるのに苦労しています。ここに私のコード:
HTMLショーバブル... CSS
.bubble {
transform: scale(0);
}
Javascript
$('button').click(function(){
$('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
});
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>
現在、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>
CSS3アニメーションを使用した方が良いでしょう。頻繁なアニメーションの場合、プレフィックスをサポートするブラウザで使用できます(-webkit、-mozなど)-
@keyframes fullScale{
from{
transform:scale(0);
}
to{
transform:scale(1);
}
}
.bubble:hover{
animation: fullScale 5s;
}
このリンクを参照してください-http://www.w3schools.com/css/css3_animations.asp
または、@ Roryによる上記のソリューションは、添付されたイベントにクラスを追加する良い方法でもあります。
Velocity.jsを使用できます。 http://velocityjs.org/ 例:
$("div").velocity({
"opacity" : 0,
"scale" : 0.0001
},1800)