ページの読み込みの際にスライドしたら体感速度ってどのくらい減るだろうと思い試しにreactでkeyframesを使ったページスライド
機能を作ってみました。なぜ作ったかというと、某ブログとかをスマホで見ていてボタンを押した後何も起こらない間が数秒続くときがあ
り、開発者としてどうしてもそこの動作が見逃せなかったのがきっかけです。もしうまいこと動作出来たら今開発しているアプリにも
導入して少しでも速度改善のピースとして役に立てたいと思っています。
keyframesとは、特定のページがアニメーション開始から終了するまでの動作を細かく指定できるCSSプロパティです。このプロパティは
まず始まりを０％、終わりを１００％で定義し、その間の％ならば自在に動きをつけることができます。
通常のstyle定義のcssでは手が届かないようなところの処理もこのプロパティでこと細かく設定できるので、滑らかなwebアプリを作りたい
と思ったらこれからはこいつに頼ればいいんですね！
reactのパッケージであるCSSTransationでも細かい動作が期待できますが、こっちはよりreact色が強い書き方をしてるのでどっちを選ぶか
は経験とお好みで決めることになりそうです。
javascript↓
import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route, Redirect, Link, NavLink, withRouter} from 'react-router-dom'
import ReactDOM from 'react-dom'
class Login extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
//何か書く
}
}
handleClick(e) {
e.preventDefault();
try {
this.props.history.push({
pathname: "/Signup",
})
} catch (err) {
}
}
render() {
return (
<div>
<div>
<button onClick={this.handleClick}>新規登録</button>
</div>
</div>
);
}
}
export default Login;
css↓
@keyframes SignUp {
0% {
opacity: 0;/* 透明 */
transform: translateX(1500px);/* X軸方向に1500px */最大限
}
100% {
opacity: 30;/* 不透明 */
transform: translateX(0);
}
}
.SignUp {
animation-duration: 0.5s;/* アニメーション時間 */
animation-name: SignUp;/* アニメーション名 */
animation-iteration-count: 1;/* アニメーションを一回だけ動かす
reactで実現させたいのでこんな感じに書いてみました。keyframesの後ろに名前SignUp（なんでもいい）を定義して、そのすぐ下で
今定義したSignUpに関するアニメーションを設定しています。コードの整理が少しめんどくさいですが、keyframesと組み合わせることで
簡単に独自のアニメーションを作ることができます。
今は別々のファイルですが、同じファイル内に書くにはどうしたらいいんだろうと模索中です。（cssは可読性を重視したいため）
今回は簡単なシンプルなサンプルを作っただけでしたが、こだわり次第でいくらでも発展させられるのでこれからも注目していきたい
と思います。
