css - 使用 styled-components 动画背景渐变

Question

我正在设置 <Paper /> 的背景(我正在使用 Material-UI，v1.0.0-beta.25)作为颜色渐变。通过单击“添加”按钮并从颜色选择器中选择一种颜色，系统会自动添加颜色。这时候，我的代码是这样的:

我想为组件的背景渐变设置动画以获得类似于 this 的东西.使用笔的代码，去掉一些我认为不需要的行，加入styled-components的实现，我写道:

import styled, { keyframes } from 'styled-components';

{/* rest of the code */}

render() {

  const gradient = keyframes`
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  `;

  const MyPaper = styled(Paper)`
    && {
      background: ${ colors.length == 0 ? `linear-gradient(to right, ${ "#FFFFFF" }, ${ "#FFFFFF" })` 
        : `linear-gradient(to right, ${ colors.map((color, key) => color.name ) })` };

      animation: ${gradient} 15s ease infinite;
    }
  `;

  return (
    <div>
      <div className = { classes.root }>

        {/* Color selected */}
        <div>
          <MyPaper className = { classes.paperStyle } elevation = { 4 }></MyPaper>
        </div>
        <br /><br /><br />

        {/* rest of the code */}

但由于某种原因，背景没有动画。

我是不是做错了什么，遗漏了什么，还是有其他方法可以做到这一点？对于实现我的目标的任何帮助，我将不胜感激。提前致谢!

Answer 1

除了你的数组 colors 的结构，我不确定它是否正确，你需要在你的组件 MyPaper 的 CSS 中定义一个 background-size 值大于 100% 和 100% 才能使动画正常工作。

@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}

.gradient {
 height: 100px;
 width: 100px;
 background: linear-gradient(to right, red, yellow, blue);
 background-size: 110% 110%;
 animation: gradient 15s ease infinite;
}

.cool {
 background: linear-gradient(to right, green, red, black);
 background-size: 200% 200%;
}

<div class="gradient"></div>
<div class="gradient cool"></div>

也许您可能需要为 Material 的 Paper 组件设置尺寸(高度和宽度)，以使其也能正常工作。