More than 5 years have passed since last update.
VelocityTransitionGroupを使用して遅延フェードインさせる
3
Last updated at Posted at 2015-10-31
react-addons-css-transition-groupを使ってAngularjsのngAnimateのStagging（上記のような遅延フェードイン）を利用したいと思っていました。
結論から言えばreact-addons-css-transition-group@0.14.1でtransitionStaggerのようなプロパティが存在しなかったので、velocity-reactを使って解決します。
まず、コンパイル結果を確認できる即席の環境を用意します。
mkdir stagger
cd stagger
tree . -L 1
# .
# ├── package.json
# └── index.js
npm install
npm start
# beefy index.js --open -- -t babelify
package.json
{"name":"stagger","dependencies":{"react":"^0.14.1","react-dom":"^0.14.1","velocity-react":"^1.1.1"},"scripts":{"start":"beefy index.js --open -- -t babelify"},"devDependencies":{"babelify":"^5.0.5","beefy":"^2.1.5","browserify":"^12.0.1"}}index.jsx
// Dependencies
import React from 'react'
import ReactDOM from 'react-dom'
// Define <Greet />
class Greet extends React.Component{
render(){
return (
<div>
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
)
}
}
// Render
document.body.innerHTML= '<main></main>'
window.addEventListener('DOMContentLoaded',()=>{
ReactDOM.render(<Greet />,document.querySelector('main'))
})
単純に<h1>をレンダリングするサーバーが完成しました。
👁 スクリーンショット 2015-11-01 07.50.10.png
これに、velocity-react@1.1.1のVelocityTransitionGroupを利用して、遅延アニメーションを加えます。
index.js
// Dependencies
import React from 'react'
import ReactDOM from 'react-dom'
import {VelocityTransitionGroup} from 'velocity-react'
// Define <Greet />
class Greet extends React.Component{
constructor(){
super()
this.state= {
children: [
(<h1>Lorem ipsum dolor sit amet.</h1>),
(<h1>Lorem ipsum dolor sit amet.</h1>),
(<h1>Lorem ipsum dolor sit amet.</h1>),
(<h1>Lorem ipsum dolor sit amet.</h1>),
(<h1>Lorem ipsum dolor sit amet.</h1>),
]
}
}
render(){
return (
<VelocityTransitionGroup
runOnMount={true}
enter={
{
animation: 'fadeIn',
stagger: 100,
}
}
leave={
{
animation: 'fadeOut',
stagger: 100,
}
}
>
{this.state.children}
</VelocityTransitionGroup>
)
}
}
// Render
window.addEventListener('DOMContentLoaded',()=>{
document.body.innerHTML= '<main></main>'
ReactDOM.render(<Greet />,document.querySelector('main'))
})
runOnMountが、react-addons-css-transition-groupのtransitionAppearに相当する属性です。初回レンダリング時にもenterを実行します。
👁 スクリーンショット 2015-11-01 07.54.32.png
これで、冒頭で紹介したgifアニメーションのように、stagger-animationが実装できました。
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme