カスタムスタイル要素
カスタムスタイル要素が必要な理由
ここでは、react-animate-observerで使える transform のスタイルを紹介します。
ほとんどは、 JSX で渡せる CSS プロパティで完結しますが、例外があります。
transformプロパティは、translateや、rotateを直接指定することができますが、
translateXや、rotateYなどのようなプロパティは、直接指定することができません。
// 例）translateXは、以下のようにしないといけない🙅♂️
<div style={{ transform: 'translateX(100px)' }} />...</div>
これは直感的ではありません 🙅♂️
それを補うために、react-animate-observerでは直接指定できるようにしています。
ですので、新しく覚えるようなものではなく、あくまで簡単に指定できるようにしているだけです。
カスタムスタイル要素の一覧
| 変換前 | 変換後 | 型 |
|---|---|---|
| translateX(${value}px) | translateX | number |
| translateY(${value}px) | translateY | number |
| translateZ(${value}px) | translateZ | number |
| rotateX(${value}deg) | rotateX | number |
| rotateY(${value}deg) | rotateY | number |
| rotateZ(${value}deg) | rotateZ | number |
| skewX(${value}deg) | skewX | number |
| skewY(${value}deg) | skewY | number |
| scaleX(${value}) | scaleX | number |
| scaleY(${value}) | scaleY | number |
| scaleZ(${value}) | scaleZ | number |
カスタムスタイルと表現しましたが実際の中身は CSS スタイルです。
tranistion を別々に指定したい場合
例えば、opacityのみ、0.3 秒で、transformのみ、0.5 秒でアニメーションさせたいとします。
ScrollAnimatorの transition は、すべて同じ秒数・タイミングになります。
その際は通常通り、JSX の CSS プロパティで指定してください。
<div style={{ transition: 'opacity .3s ease, transform .5s ease-out' }} />...</div>
次は、HTML タグを指定する方法を紹介します。