こんにちは〜 今日は、cssでアニメーションを作った時にちょっとしたことでミスったと言う話をしたいと思います。

ちなみに、今回作りたかったのは、横に移動させると言う超簡単です。 実際のコードはこんな感じ（ミスver）

.block{
    position: fixed;
    height: 50px;
    width: 50px;
    transition: 0.5s;
}
.block.click{
    position: fixed;
    height: 50px;
    width: 50px;
    left: 100px;
    transition: 0.5s;
}

こんな感じ。50×50のブロックが一つ、クリックすると、jsによってクラス名「click」が付いたり外れたりします。 そうすることで、transitionで設定した0.5秒かけて右に100px動く（left:100px）、と言う予定です。

一見特に間違えてなさそうですが、実は、アニメーションせずに一瞬で右に100px動いてしまいます。 何故か。 原因は意外に単純で、「click」がない方に、leftの初期値が設定されていないからです。 そのため、アニメーションの開始地点が存在せず、すぐに移動してしまったという訳です。

まぁ、初期値が0だとしてもきちんと設定しようというお話でした。

.block{
    position: fixed;
    height: 50px;
    width: 50px;
    left: 0px; /* これ、忘れずに */
    transition: 0.5s;
}
.block.click{
    position: fixed;
    height: 50px;
    width: 50px;
    left: 100px;
    transition: 0.5s;
}

それでは、またね〜