2017-12-28 33 views
0

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

enter image description here

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!

+0

Können Sie die Struktur Ihres Arrays 'colors' zeigen? – Dez

+0

@Dez 'state = {colors: [],};' und dies ist die [Methode] (https://gist.github.com/ArCiGo/e1202d8d249aef0948249fa03b74dcd5), die zu diesem Zeitpunkt die Farben im Array – ArCiGo

Antwort

0

Neben der Struktur Ihres Arrays colors, dass ich nicht sicher bin, ob es richtig ist, müssen Sie in der CSS für Ihre Komponente MyPaper einen Hintergrundwert größer als 100% und 100%, um die Animation zu definieren Arbeit.

@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>

Vielleicht brauchen Sie vielleicht eine Größe (Höhe und Breite), um Ihre Paper Komponente des Materials zu setzen, um es zu arbeiten.

+0

speichert Danke, Mann. Das hat mein Problem gelöst. Ich habe die 'Hintergrundgröße' in meiner [Komponente] hinzugefügt (https://gist.github.com/ArCiGo/053b0cab7cf653ba235aaac9e1a66144). Gibt es eine Möglichkeit, den Hintergrund wie eine Schleife zu animieren? Ich möchte keine Sway-Bewegung – ArCiGo

+0

Setzen Sie einen Timer mit der gleichen Dauer der Animation und verwenden Sie eine Funktion darin, die die Reihenfolge der Farben im Array vertauscht. – Dez

+0

Wie kann ich das tun? Entschuldigung, aber ich bin nicht gut darin – ArCiGo

Verwandte Themen