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

ボックス要素の表示位置を移動するアニメーションがカクつく

More than 5 years have passed since last update.

ボックス要素の表示位置をcssを利用して移動させるアニメーションを作成した際、Androidのchromeで表示がカクつく問題がありました。

この解決策について調べてみました。

アンチパターン

divで定義したボックスの表示位置を移動するアニメーションを作成する場合。

もともと、cssでボタンが押されたときにあるdiv要素の位置を変えるようなものを下みたいな方法で実装していました。

.menuというdiv要素をあらかじめleft:-240pxで定義。

メニューボタンが押されたら、動かしたいdiv要素に.menu-openクラスを追加する。

ということで、以下のようなcssを定義しました。(一部抜粋)

.menu {
      position: fixed;
      left: -240px;

      transition: all 0.4s;
}

.menu-open {
      left: 0px;
}

これを、実際に動かしたところ、PCやiphoneで動かす分には問題なかったのですが、androidのchromeで動かした場合に、アニメーションがカクついて表示される問題がありました。

解決策

いろいろ調べたところ、cssには表示位置を移動させるためのtransformsという仕様があって、この transformプロパティを使用する とカクつき問題が解消することがわかりました。

さらに、PCのブラウザとかで見た動きもよりなめらかになります。

.menu {
  position: fixed;
  left: -240px;

  transition: all 0.4s;
}

.menu-open {
  -webkit-transform: translate(240px, 0);
          transform: translate(240px, 0);
}

おわりに

以下のブログエントリにレスポンシブなメニューの作り方についてまとめてあるので、興味ある方は参照ください。

レスポンシブなサイドメニューを表示させる

Why do not you register as a user and use Qiita more conveniently?
  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
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