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

Googleのマテリアルデザインの左上からななめに表示するやつ

More than 3 years have passed since last update.

人のソースを見て勉強しようシリーズ第3弾
Google Material Design Hierarchical Timing デモ

今回の参考ソースはここ

sample3.gif

CSS3にアニメーション、JSにはタイミングとか記述してる。

CSS

.container {
  width: 460px;
}
.item {
  transform: scale(1);                  //要素の拡大
  transition-timing-function: ease-out;  //ゆっくり終わる
  backface-visibility: hidden;          //ちらつき対策
  perspective: 1000;                    //3D変形の奥行き Firefox用...?
}
.visible {
  transform: scale(0);
}

どうして backface-visibility: hidden; を入れてるんだろうと思って、調べてみたら、CSSのTransformsでTransitionと組み合わせて、要素を移動させたり、拡大縮小させたりするとちらつくことがあるので、その対策としていれてるっぽい。
perspective: 1000; の方は何で入れてるかわからなかったけど、2年前の記事でFirefoxの Transforms がいけてないというのがあったのでその対応策とか...?

JS

(function() {
  var appear,
      delay,
      disappear,
      i,
      offset,
      _i,
      _len,
      item;

  item = $(".item");
  for (_i = 0, _len = item.length; _i < _len; _i++) {
    i = item[_i];
    offset = i.offsetLeft + i.offsetTop;
    delay = offset / 1000;
    $(i).html(delay); //.itemに時間を表示
    $(i).css({
      'transition-delay': "" + (delay * 1.318) + "s", //アニメーションがはじまるタイミング
      'transition-duration': "" + 0.3 + "s" //アニメーションにかかる時間
    });
  }

  //.itemを非表示にしていく
  appear = function() {
    return setTimeout((function() {
      $('.item').addClass('visible');
      return disappear();
    }), 1500);
  };

  //.itemを表示    
  disappear = function() {
    return setTimeout((function() {
      $('.item').removeClass('visible');
      return appear();
    }), 1500);
  };

  appear();

}).call(this);

表示の方法は.visibleを付けたり消したりして行うので基本の動きはCSS3。
表示非表示のタイミングについては.itemのx,y座標を足して1000で割った値に1.318かけた値にしてるみたい。この1.318という数値設定が謎。好み?

あとなんで即時関数に.call(this);つけるの?って思ったら関数内のthisがundefinedになるかららしい。
(もともとCoffeeで書かれてたのをコンパイルするとそうなるっぽい。)

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした