Question

在我的反应应用程序中，我在某些组件中使用CSS动画，但有些时候动画不流畅。

例如像CSS spinner loader动画。如何让它免费？当我们重新加载页面时，有时旋转器会在旋转时卡住。

$sql = "SELECT count(id) as leadersearch FROM `$database`.`$mem` where parent_id in ($lv1)";
$result = mysqli_query($con, $sql);
$lv2 = mysqli_fetch_array($result);

组件少：

Loader React component 

import React from 'react';
import PropTypes from 'prop-types';
import './loader.css';

class Loader extends React.Component {
    render() {
        if (this.props.show) {
            return (
                <div className="loader-animation-container">
                    <div className="spinner-container">
                        <div className="spinner" />
                    </div>
                </div>
            );
        }
        return null;
    }
}

Loader.propTypes = {
    show: PropTypes.bool.isRequired
};

Loader.defaultProps = {
    show: false
};

export default Loader;

Answer 1

您需要将@keyframes声明移至＆＃34; global＆＃34;范围。关键帧不能嵌套在选择器中。

.loader-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;

    .spinner-container {
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 5px;
        border-radius: 20px;
        transform: translate(-50%);
        z-index: 6;
        background-color: #fff;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.12);

        .spinner {
            height: 20px;
            width: 20px;
            animation: rotate 0.8s infinite linear;
            border: 2px solid #ff3e6c;
            border-right-color: transparent;
            border-radius: 20px;
            will-change: transform;
        }
    }
}

@keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

Working JSFiddle Demo

如何使CSS动画jank免费？

1 个答案: