Erstellen eines Flippers mit React JS und LESS CSS

Heute werde ich erklären, wie man mit CSS3-Animationen und React JS eine Flip-Kachel erstellt. Wenn Sie React JS noch nie verwendet haben, verpassen Sie etwas. Sie können es überprüfen hier. Ich werde LESS CSS für einige der fortgeschritteneren CSS verwenden, da es uns ermöglicht, Herstellerpräfixe durch die Verwendung von LESS-Mixins vollständig zu ignorieren. Wenn Sie LESS CSS auch noch nie verwendet haben, schlage ich vor, dass Sie sich darüber informieren hier. Es lohnt sich auf jeden Fall, zu einem CSS-Präprozessor zu greifen, auch wenn es nicht LESS ist.

Ich werde den Artikel in zwei Abschnitte unterteilen: den React-Abschnitt, in dem ich bespreche, was jede der verschiedenen Klassen tut und wofür sie verantwortlich ist; und der Abschnitt WENIGER CSS, in dem ich auf jede der verschiedenen CSS-Klassen eingehen werde und wie sie den Flipper animieren.

Reagieren

Es gibt vier Klassen, die ich durchgehen werde: App, Flipper, Frontund Back.

App

var App = React.createClass({
  getInitialState: function() {
    return {
      flipped: false
    };
  },

  flip: function() {
    this.setState({ flipped: !this.state.flipped });
  },

  render: function() {
    return <div>
      <Flipper flipped={this.state.flipped} orientation="horizontal" />
      <Flipper flipped={this.state.flipped} orientation="vertical" />
            
      <div className="button-container">
        <button onClick={this.flip}>Flip!</button>
      </div>
    </div>;
  }
});

Das App Die Klasse ist für das Rendern des größten Teils der Anwendung verantwortlich, einschließlich verschiedener Beispiele Flippers und die Schaltfläche zum Starten der Flip-Animation.

Das getInitialState Methode richtet die ein App, sodass die Kacheln nicht standardmäßig umgedreht werden. Das kippen -Methode invertiert die umgedrehte Zustandseigenschaft und die machen Methode zeichnet eigentlich die Anwendung. Darin rendern wir zwei Flippers: eine zum horizontalen Spiegeln und die andere zum vertikalen Spiegeln. Es gibt auch eine Schaltfläche, mit der die Flip-Animation ausgelöst wird.

Flipper

var Flipper = React.createClass({
  render: function() {
    return <div className={"flipper-container " + this.props.orientation}>
      <div className={"flipper" + (this.props.flipped ? " flipped" : "")}>
        <Front>the front!</Front>
        <Back>the back!</Back>
      </div>
    </div>;
  }
});

Das Flipper Die Klasse ist dafür verantwortlich, die verschiedenen Divs zu zeichnen und jede der in der Animation verwendeten Klassen so einzustellen, dass sie von vorne nach hinten gedreht wird. Sie werden im sehen machen Methode, dass es auch zwei weitere Klassen gibt, auf die verwiesen wird: Front und Back. Diese Klassen enthalten, was auf der Vorderseite der Kachel im nicht umgedrehten Zustand gezeigt wird, und was auf der Rückseite ist, die gezeigt wird, wenn die Kachel umgedreht wird.

Vorne und Hinten

var Front = React.createClass({
  render: function() {
    return <div className="front tile">{this.props.children}</div>;
  }
});
      
var Back = React.createClass({
  render: function() {
    return <div className="back tile">{this.props.children}</div>;
  }
});

Das Front und Back Klassen sind dafür verantwortlich, den entsprechenden Inhalt basierend auf dem umgedrehten Status des Elternteils anzuzeigen Flipper Klasse. Die beiden Klassen sind praktisch identisch, mit nur einem einzigen Klassennamen, der die beiden trennt, aber ich hatte das Gefühl, dass sie aus Gründen der Lesbarkeit getrennt werden sollten.

Das Kinder prop ist eine spezielle Requisite, die den untergeordneten Inhalt der Klasse enthält. Wenn wir jede der Klassen in der Flipper Klasse oben sehen Sie den Inhalt für die beiden Klassen als “die Vorderseite!” bzw. “der Rücken!”. Dieser Inhalt wird in der Kinder-Prop platziert, die wir in jeder der Rendermethoden der Tile-Klassen rendern.

CSS

.flipper-container {
  float:left;
  width:250px;
  height:250px;
  margin-right:15px;
  display:block; .perspective;
        
  span {
    color:white;
  }
  
  >div.flipper {
    float:left;
    width:100%;
    height:100%;
    position:relative;
    .transform-style(preserve-3d);

    .front, .back {
      float:left;
      display:block;	
      width:100%;
      height:100%;
      .backface-visibility-hidden;
      position:absolute;
      top:0;
      left:0;
      .transform-style(preserve-3d);
      .transition(-webkit-transform ease 500ms);
      .transition(transform ease 500ms);
    }
          
    .front {
      z-index:2;
      background:#19489E;
              
      /* front tile styles go here! */
    }
          
    .back {
      background:#9E1919;
      
      /* back tile styles go here! */
    }
  }
}
      
.flipper-container.horizontal {
  .front { .transform(rotateY(0deg)); }
  .back { .transform(rotateY(-180deg)); }
        
  div.flipper.flipped {
    .front { .transform(rotateY(180deg)); }
    .back { .transform(rotateY(0deg)); }
  }
}
      
.flipper-container.vertical {
  .front { .transform(rotateX(0deg)); }
  .back { .transform(rotateX(-180deg)); }
        
  div.flipper.flipped {
    .front { .transform(rotateX(180deg)); }
    .back { .transform(rotateX(0deg)); }
  }
}

Ich habe der Kürze halber einige der herstellerspezifischen CSS-Regeln weggelassen. Das Demo Die Seite hat jedoch die vollständigen CSS-Regeln, damit der Flipper in allen Browsern funktioniert. Wenn Sie sie also sehen müssen, sehen Sie sich diese an.

Es gibt ein paar ausgefallene CSS-Regeln, die hier im Spiel sind. Ich werde sie alle durchgehen und beschreiben, was sie tun.

  • Transform-Stil
    Die Transformationsstilregel gibt wenig überraschend einen Stil für die Transformation an. In diesem Beispiel interessiert uns nur der Wert „preserve-3d“, der angibt, dass alle verschachtelten Elemente ihren Rendering-Stil in der dritten Dimension beibehalten sollen. Es bedeutet nichts ohne die Transformations-CSS-Regel, die wir auch verwenden. Dies gibt die Illusion, dass die Kacheln umgedreht werden. Ohne sie scheint die Kachel zu schrumpfen und zu wachsen, anstatt sich in 3D umzudrehen.

  • Perspektive
    Dies definiert, wo die Orientierung und Distanz des Betrachters von der 3D-Transformation ist. Das klingt ein wenig seltsam, aber im Grunde definiert es die Anzahl der Pixel, die das gerenderte Element von der Ansicht ist.

  • Backface-Sichtbarkeit
    Diese Eigenschaft gibt den Sichtbarkeitsstatus der Rückseite von Elementen an. Dies macht für statische Elemente auf einer Seite keinen Sinn, aber in unserem Fall ist es wichtig, die Rückseite auszublenden, damit wir keine umgedrehte Version der Kachel sehen. In unserem Beispiel wird der Text “the front!” ist sowohl auf der Vorder- als auch auf der Rückseite der Fliese aufgedruckt. Wenn wir diese Eigenschaft auf hidden setzen, ist nur die Vorderseite sichtbar.

Fazit

Und das ist es! Danke fürs Lesen. Noch einmal, wenn Sie diese Flip-Kacheln in Aktion sehen möchten, können Sie einen Blick auf die Demo-Seite werfen hier.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *