Question

我有一个不确定的线性css加载指示器，就像材料设计中那样。每次我从Redux的reducer中获取数据时，都会显示此指示符。问题是，当指示器出现时，它没有动画。看起来整个页面都会冻结，直到reducer填充了数据。

假设我的装载指示器始终可见且动画。一旦我将数据提取/请求数据到减速器，加载指示器就会停止动画。

您认为这会导致什么？它是可以修复还是我需要实现一个gif指标而不是一个css指示符？

编辑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重新呈现并显示获取的数据。

此Loader组件包含在连接到reducer的顶级组件中，在获取数据时，组件正在显示。

{ this.props.globalState.someReducer.isFetching ?
  <Theme render="Loader" type="indeterminateLinear" /> : null
}

编辑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个组件。结构可能是这样的：

- 布局＆lt; - 这里我们有Loader

---- Transactions＆lt; - 这是排序函数

------支付＆lt; - 子组件

现在，每当我点击排序按钮时，一切都会冻结，直到排序结束。当我说“一切”时，它意味着所有组件，包括父组件（在这种情况下为Layout和Loader）。

Loader是使用Radium构建的。

我必须在这里遗漏一些东西，我无法相信当一个子组件重新渲染时所有组件都会冻结。

Answer 1

我终于解决了它。经过一些研究，我学到了很多关于网络工作者的知识，只是为了发现它不是正确的解决方案。无论如何，它必须在javascript如何工作。 Javascript是单线程的，因此阻塞。因此，当我们有一些需要花费一些时间的任务时（在我的情况下是大约一秒钟）我们在屏幕上看到的一切都会冻结，甚至是css动画！它取决于您使用的浏览器。就我而言，我使用的是Chrome。我测试了它firefox并且动画没有停止。

让我们去解决方案。我注意到Chrome有一些转换问题，特别是一些基本的css元素，如top，right，bottom，left，margin ...所以我不得不使用转换。并非所有变换都可以。例如，翻译百分比不会起作用，所以我不得不使用像素。为此，我需要计算父元素的宽度并进行一些计算，以便能够在屏幕的左侧到右侧将我的子元素转换为X轴。

我将使用实际代码更新此帖子。

在获取数据时显示CSS加载指示符

1 个答案: