Help us understand the problem. What is going on with this article?

animateで複数のプロパティと同時にtransformの値も変化させる

More than 1 year has passed since last update.

animateで回転を付ける時には、あまり見え方に影響のないプロパティ(z-indexなど)を0から1にした値をstepで取得して、必要な値になるよう乗算し、cssでtransform:rotate()の中に連続的に格納するという方法が一般的だと思うけど、回転以外の動きも同時につける方法が見つからなかったので、やってみました。

jquery
$('#target').css({
   top:'10px',
   left:'10px',
   opacity:'0',
}).stop().animate({
   top:'100px',
   left:'200px',
   opacity:'1',
   dummyprop:'45'//ステップ用のダミープロパティを設定(初期値は0となる様子)
},{
   duration:1000,
   step:function(s,n){
      if(n['prop']=='dummyprop'){//n['prop']でanimateしているプロパティ名を取得できる
         //console.log(s);//dummypropの変化が取得できる
         $(this).css('transform','rotate('+s+'deg)');
      }
   }
});
  • dummypropは$('#target')のどこかに格納されるようで、再度animateする時は変化した後の値(例の場合は45)からスタートとなる。
  • 上記はダミープロパティ名をdegとかにしておいた方が保守性は高そう。
  • dummypropは複数設定できる。
  • 上記ではcssでまず初期化みたいなことをしているけど、ここにdummypropで初期値を設定しようとすると、おかしな挙動になる。

dummypropなんていう変なものを設定するのが嫌な時は、やっぱりz-indexあたりをanimateさせて、stepのなかでn['prop']=='z-index'で変化値を取得するのが良いかもしれない。step:function()の第二引数を取得することで、欲しいプロパティの値を選べるのがミソ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away