Ich setze den Hintergrund der <Paper />
(ich benutze Material-UI, v1.0.0-beta.25) als Farbverlauf. Die Farben werden automatisch hinzugefügt, indem Sie auf die Schaltfläche Hinzufügen klicken und eine Farbe aus der Farbauswahl auswählen. Zu dieser Zeit kommt der Code folgendermaßen aus:Animiere Hintergrund Farbverlauf mit gestylten Komponenten
ich den Hintergrund Gradient der Komponente animieren möchten etwas wie this zu bekommen. Mit dem Code des Stiftes, das Entfernen einiger Zeilen, die ich nicht für notwendig erachtet und das Hinzufügen der Implementierung von styled-components
, schrieb ich:
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 */}
aber aus irgendeinem Grund der Hintergrund animieren lassen sich nicht.
Mache ich etwas falsch, vermisse etwas oder gibt es eine andere Möglichkeit, das zu tun? Ich werde jede Hilfe schätzen, um mein Ziel zu erreichen. Danke im Voraus!
Können Sie die Struktur Ihres Arrays 'colors' zeigen? – Dez
@Dez 'state = {colors: [],};' und dies ist die [Methode] (https://gist.github.com/ArCiGo/e1202d8d249aef0948249fa03b74dcd5), die zu diesem Zeitpunkt die Farben im Array – ArCiGo