材料設計のような不定線状CSS読み込みインジケータがあります。 Reduxのレデューサーからデータを取得するたびに、私はこのインジケーターを表示します。問題は、インジケータが表示されている間、アニメーション化されていないことです。レデューサーにデータが入力されるまでページ全体がフリーズするようです。データの取得中にCSS読み込みインジケータが表示される
ローディングインジケータが常に表示され、アニメーション化されているとします。レデューサーにデータを取得/要求するとすぐに、ローディングインジケーターのアニメーションが停止します。
あなたはこれを引き起こしていると思いますか？それは修正可能か、またはCSSのインジケータではなく、GIFインジケータを実装する必要がありますか？
EDIT 1
これは私のLoaderコンポーネントです：
import React, { Component, PropTypes } from 'react';
import radium from 'radium';
// indeterminate Linear (type: indeterminateLinear)
const indeterminateLinearLong = radium.keyframes({
'0%': {
left: '-35%',
right: '100%'
},
'60%': {
left: '100%',
right: '-90%'
},
'100%': {
left: '100%',
right: '-90%'
}
});
const indeterminateLinearShort = radium.keyframes({
'0%': {
left: '-200%',
right: '100%'
},
'60%': {
left: '107%',
right: '-8%'
},
'100%': {
left: '107%',
right: '-8%'
}
});
const indeterminateLinear = {
base: {
backgroundColor: '#26a69a',
},
progress: {
position: 'relative',
height: '4px',
display: 'block',
width: '100%',
backgroundColor: '#acece6',
// borderRadius: '2px',
backgroundClip: 'padding-box',
// margin: '0.5rem 0 1rem 0',
overflow: 'hidden',
zIndex: '999'
},
before: {
position: 'absolute',
backgroundColor: 'yellow',
top: '0',
left: '0',
bottom: '0',
willChange: 'left, right',
animation: 'indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite',
animationName: indeterminateLinearLong
},
after: {
position: 'absolute',
backgroundColor: 'yellow',
top: '0',
left: '0',
bottom: '0',
willChange: 'left, right',
animation: 'indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite',
animationName: indeterminateLinearShort,
animationDelay: '1.15s'
}
};
// Indeterminate Cirular (type: indeterminateCircular (default))
const indeterminateCircularRotate = radium.keyframes({
'100%': {
transform: 'rotate(360deg)'
},
});
const indeterminateCircularColor = radium.keyframes({
'100%, 0%': {
stroke: 'red'
},
'40%': {
stroke: 'blue'
},
'60%': {
stroke: 'green'
},
'80%, 90%': {
stroke: 'yellow'
}
});
const indeterminateCircularDash = radium.keyframes({
'0%': {
strokeDasharray: '1,200',
strokeDashoffset: '0'
},
'50%': {
strokeDasharray: '89,200',
strokeDashoffset: '-35'
},
'100%': {
strokeDasharray: '89,200',
strokeDashoffset: '-124'
},
});
const indeterminateCircular = {
loader: {
position: 'absolute',
width: '100px',
height: '100px',
left: '50%',
top: '20%'
},
circular: {
animation: 'x 2s linear infinite',
animationName: indeterminateCircularRotate,
height: '24px',
position: 'relative',
width: '24px'
},
path: {
strokeDasharray: '1,200',
strokeDashoffset: '0',
animation: 'dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite',
animationName: indeterminateCircularDash,
strokeLinecap: 'round',
stroke: 'red',
strokeWidth: '2'
}
}
class Loader extends Component {
render() {
const {
type
} = this.props;
let loader = null;
if (type === 'indeterminateLinear') {
loader = (
<div style={ indeterminateLinear.progress }>
<div style={ indeterminateLinear.before }></div>
<div style={ indeterminateLinear.base }></div>
<div style={ indeterminateLinear.after }></div>
</div>
);
} else {
loader = (
<div>
<div style={ indeterminateCircular.loader }>
<svg style={ indeterminateCircular.circular } viewBox="25 25 50 50">
<circle style={
indeterminateCircular.path
} cx="50" cy="50" r="20" fill="none" strokeMiterlimit="10"/>
</svg>
</div>
</div>
);
}
return (
<div>{ loader }</div>
);
}
}
Loader.propTypes = {
type: PropTypes.string,
};
export default radium(Loader);
私はLoaderコンポーネントが含まれている場合、それは問題なく動作し、アニメーション化。しかし、私はいくつかのデータを取得するように要求すると、アニメーションは停止します。 Reactがrerendersしてフェッチされたデータを表示するまで、他のものも凍っていることに気づくことができます。
このローダーコンポーネントは、レデューサーに接続されている最上位コンポーネントに含まれています。データがフェッチされているときにコンポーネントが表示されています。私は別のユースケースを追加したい
{ this.props.globalState.someReducer.isFetching ?
<Theme render="Loader" type="indeterminateLinear" /> : null
}
EDIT 2
。この時間はreduxとは関係がないので、画像から削除することができます。それは反応そのものでなければならない。
私はいくつかの項目をリストしたページを持っています。 40個のアイテムがあり、このリストを日付順にソートするボタンがあります。
これは私が私のレンダリング機能を持っているものです。
const sortDesc = (a, b) => (
transactions[b].updatedAt ||
transactions[b].createdAt) -
(transactions[a].updatedAt ||
transactions[a].createdAt
)
const sortAsc = (a, b) => (
transactions[a].updatedAt ||
transactions[a].createdAt) -
(transactions[b].updatedAt ||
transactions[b]. createdAt
)
let sortDate = sortDesc;
if (!this.state.sortDesc) {
sortDate = sortAsc
}
<button onClick={ this.handleSortBy }>sort by date</button>
{
Object.keys(transactions)
.sort(
sortDate
).map((key, index)=> {
return (
<div key={ index }>
<Payout {...this.props} />
</div>
);
})
}
私は親コンポーネント内部の私のLoaderコンポーネントを持っています。構造はこのようなものが考えられます。 - レイアウト< - ここで我々はローダー
を持っている----取引< -
ここソート機能
です------配当< - 子コンポーネント
今、ソートボタンを押すたびに、ソートが完了するまですべてがフリーズします。 「すべて」と言うと、親コンポーネント（この場合はLayoutとLoader）を含むすべてのコンポーネントを意味します。
LoaderはRadiumで構築されています。
私はここで何かを紛失しているに違いありません。子コンポーネントが再レンダリングされているときに、すべてのコンポーネントがフリーズするとは思えません。
どのように正確にアニメーション化していますか？ –
コンポーネントのコードを含めてください。 – mtaube
助けてください？ – ElPirru