ホームページ >ウェブフロントエンド >jsチュートリアル >React公式サイトアニメーションライブラリ（react-transition-group）の新しい書き方
この記事では、React 公式 Web サイトのアニメーション ライブラリ (react-transition-group) の新しい書き方を主に紹介します。必要な友達はそれを参照できるように共有します。 transition-group 公式サイトが提供するアニメーショントランジションライブラリです。
react-transition-group と呼ばれるもので、前の 2 つの記録を作成したので、必要な人にいくつかのヒントも提供しました。 # npm npm install react-transition-group --save # yarn yarn add react-transition-group
react-transition-group 它是以前两个的合体版本，所以写下这个记录一下，同时也给一些需要的猿门给一些小的提示。//自己简单的封装了一个，该有的参数都由了，可以自行粘贴在自己的代码里面去试试。
class Fade extends React.Component {
constructor(props) {
super(props);
}
done =() => {
// console.log('结束了')
}
addaddEndListener = (node) => { //原生时间transition运动的事件
node.addEventListener('transitionend', this.done, false);
}
// 三个进入状态的事件，可以做你想做的事情
onEnter = (node, isAppearing) => {
console.log(isAppearing, 'onEnter')
}
onEntering = (node, isAppearing) => {
console.log(isAppearing, 'onEntering')
}
onEntered = (node, isAppearing) => {
console.log(isAppearing, 'onEntered')
}
// 三个退出的状态的事件
onExit = (node) => {
console.log('onExit')
}
onExiting = () => {
console.log('onExiting')
}
onExited = () => {
console.log('onExited')
this.props.self()
}
render() {
const { in: inProp, dur} = this.props;
const defaultStyle = {
transition: `transform ${300}ms ease-in-out, opacity ${300}ms ease-in-out`,
transform: 'translateX(100px)',
opacity: '0'
}
const transitionStyles = {
entering: { transform: 'translateX(100px)', opacity: '0'},
entered: { transform: 'translateX(0px)', opacity: '1' },
exiting: {transform: 'translateX(0px)', opacity: '1'},
exited: {transform: 'translateX(0px)', opacity: '0'}
};
const duration = {
enter: 300,
exit: 300,
}
// 上面的都是基本参数，样式的转变以及时间的设定，具体的可以看官网文档
// 样式也可以写成className 例如<MyComponent className={`fade fade-${status}`} />
return (
<Transition
onEnter={this.onEnter}
onEntering={this.onEntering}
onEntered={this.onEntered}
onExit={this.onExit}
onExiting={this.onExiting}
onExited={this.onExited}
addEndListener={this.addaddEndListener}
in={inProp}
unmountOnExit={false} // 为true 代表退出的时候移除dom
appear={true} // 为true 渲染的时候就直接执行动画，默认false，
timeout={duration}
>
{
state => {
console.log(state, '###') //你可以很直观的看到组件加载和卸载时候的状态
return(
<p style={{
...defaultStyle,
...transitionStyles[state]
}}>
{this.props.children}
</p>
)
}
}
</Transition>
);
}
}
而官方提供的三个组建Transition,CSSTransition,TransitonGroup。
过渡组件(Transiton)允许您用一个简单的声明性API描述随着时间的推移从一个组件状态到另一个组件状态的转换。最常用的是用来动画一个组件的安装和卸载，但也可以用来描述在适当的过渡状态。默认情况下，该组件不会更改其呈现的组件的行为，它只跟踪组件的“进入”和“退出”的状态。由你来为这些状态定义效果。（翻译）
实际的情况就是你如果只写这个组件是没有任何的效果的，就和你写一个p一样。所以你需要给他们赋予一些参数才可以。例如下面这个例子
entering entered exiting exited
其中上面的状态有四种：
let num = 1;
class Dnd extends React.Component {
state = {
ins: true,
current: 1,
dom: <p className={l.test}>
ceshi weizhi {num}
</p>
}
handle = (bool) => {
this.setState({
test: !bool
})
}
end = () => {
const that = this;
num = num + 1;
setTimeout(function () {
that.setState({
test: true,
dom: <p className={l.test}>
888888 {num}
</p>
})
}, 500)
}
render () {
const { location } = this.props
const { test } = this.state;
return (
<MainLayout location={location}>
<Button onClick={this.handle.bind(null, this.state.test)}>点击transition</Button>
<Fade in={this.state.test} self={this.end}>
{this.state.dom}
</Fade>
</MainLayout>
)
}
}
// 效果是每次点击按钮都会进行一次进场和出场的动画。也可以自行衍生。
组件的初始化状态都停留在exited
上面就是写的一个最基本的例子，下面是如何的调用
这个组件大概就是这样的，这样适合写一个tab类型的页面，在切换的时候可以展示不同的dom
state = {
star: false
}
<Button onClick={this.handleStar.bind(null, star)}>start</Button>
<CSSTransition
in={star}
timeout={300}
classNames="star"
unmountOnExit
>
<p className="star">⭐</p>
</CSSTransition>
此组件是在转换的出现、进入、退出阶段应用一对类名(也就是className),靠这个来激活CSS动画。所以参数和平时的className不同，参数为：classNames
参数：（主要）in, timeout, unmountOnExit, classNames, 用法同Transition。看如下例子：
.star {
display: inline-block;
margin-left: 0.5rem;
transform: scale(1.25);
}
.star-enter {
opacity: 0.01;
transform: translateY(-100%) scale(0.75);
}
.star-enter-active {
opacity: 1;
transform: translateY(0%) scale(1.25);
transition: all 300ms ease-out;
}
.star-exit {
opacity: 1;
transform: scale(1.25);
}
.star-exit-active {
opacity: 0;
transform: scale(4);
transition: all 300ms ease-in;
}
效果是点击button 显示星星，在点击消失星星的动画！
参数classNames="star" 公式に提供されている 3 つのコンポーネントは、Transition、CSSTransition、および TransitonGroup です。
Transition コンポーネント (Transiton) を使用すると、単純な宣言型 API を使用して、時間の経過とともにあるコンポーネントの状態から別のコンポーネントの状態への遷移を記述することができます。コンポーネントのインストールとアンインストールをアニメーション化するために最も一般的に使用されますが、必要に応じて遷移状態を説明するために使用することもできます。デフォルトでは、このコンポーネントはレンダリングするコンポーネントの動作を変更せず、コンポーネントの「開始」状態と「終了」状態を追跡するだけです。これらの状態の影響を定義するのはあなた次第です。 (訳)
実際のところ、このコンポーネントだけを書いても、pを書いた場合と同様に効果はありません。したがって、いくつかのパラメータを与える必要があります。たとえば、次の例1、星星显示 对应的class为star-enter star-enter-active 动画走完为star-enter-done 2、星星消失 对应的class为star-exit star-exit-active 动画走完为star-exit-doneには 4 つの状態があります:
classNames={{
appear: 'my-appear',
appearActive: 'my-active-appear',
enter: 'my-enter',
enterActive: 'my-active-enter',
enterDone: 'my-done-enter,
exit: 'my-exit',
exitActive: 'my-active-exit',
exitDone: 'my-done-exit,
}} コンポーネントの初期化状態は exited のままですclass List extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{ id: 1, text: 'Buy eggs' },
{ id: 2, text: 'Pay bills' },
{ id: 3, text: 'Invite friends over' },
{ id: 4, text: 'Fix the TV' },
]
}
}
render() {
const { items } = this.state;
return (
<p>
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="fade"
>
<p>
<Button
onClick={() => {
this.setState(state => ({
items: state.items.filter(
item => item.id !== id
),
}));
}}
>
×
</Button>
{text}
</p>
</CSSTransition>
))}
</TransitionGroup>
<Button
type="button"
onClick={() => {
const text = prompt('Enter some text');
if (text) {
this.setState(state => ({
items: [
...state.items,
{ id: 1123, text },
],
}));
}
}}
>
Add Item
</Button>
</p>
);
}
}
.fade-enter {
opacity: 0.01;
}
.fade-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0.01;
transition: opacity 500ms ease-in;
}
CSSTransition
このコンポーネントは、遷移の外観、開始、終了段階でクラス名のペア (つまり、className) を適用し、これに依存して CSS アニメーションをアクティブにします。したがって、パラメータは通常の className とは異なります: classNames
1、component default 'p' 也就是TransitionGroup渲染出来的标签为p，也可以就行更改，例如component="span" 渲染出来的就是span标签了 2、children 相当于你给的组件，可以是字符串或者自定义组件等。 3、appear 写在TransitionGroup里面相当于开启或者禁止里面的Transition || CSSTransition 方便写的作用
classNames="star" を指定すると、コンポーネントは次のように対応する状態の className を見つけます rrreee
実行順序はrrreee
公式サイトの説明に従うと、興味があれば、ぜひ試してみてください。rrreee
各ステージのフック機能はTransitionと同じですTransitionGroup
グループを見ればリスト形式のアニメーションであることが分かります！しかし、公式 Web サイトを読んだ後、TransitionGroup はいかなる形式のアニメーションも提供していないことがわかりました。特定のアニメーションはラップした CSSTransition のアニメーションに依存するため、リスト内でさまざまな種類のアニメーションを作成できます。例を見てみましょう
cssrrreeeその効果は、リスト項目の 1 つを追加および削除し、フェード効果を生み出すことです。端的に言えば、複数の Transition または CSSTransition の組み合わせの効果です。
ただし、いくつかのパラメーターも提供されます🎜rrreee🎜 3 つのコンポーネントのおおよその特性は次のとおりです。残りはすべてあなたの開発次第です！いくつかの小さな例も含めて説明しますので、楽しみにしていてください。 。 。 。 🎜🎜以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 🎜🎜関連する推奨事項: 🎜🎜🎜ネイティブ JS は window.scrollTo() に基づいて垂直スクロール アニメーション ツール関数をカプセル化します🎜🎜🎜🎜🎜Jquery は読み込み遷移マスクを追加します🎜🎜以上がReact公式サイトアニメーションライブラリ（react-transition-group）の新しい書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。