Verwendung von velocity.js Animationen in React

Question

Kann ich velocity.js Animationen innerhalb Reagieren Komponenten ohne es ohne Geschwindigkeit reagieren Bibliothek zu integrieren? Ich mag es nicht standardmäßig, wenn die Komponente geladen ist, wird der Endzustand der Animation angezeigt. Wie kann ich Animation zum Laden von Komponenten machen?

Answer 1

einfaches Beispiel:

1. Importgeschwindigkeit

   import Velocity from 'velocity-animate'; 
   

2. dann Animation in componentDidMount starten

   import React, { Component } from 'react'; 
   class VelocityExample extends Component { 
       componentDidMount(){ 
        Velocity(this.refs.block,{ scale: 2 },500) 
        .then(e=>console.log('animation complete')) 
       } 
       render(){ 
        return <div ref="block" >VelocityExample</div>; 
       } 
   } 
   

webpackbin LIVE DEMO

Answer 2

Erstens:

import Velocity from 'velocity-animate'; 
import {findDOMNode} from 'react-dom'; 
import $ from 'jquery'; 

Zweitens:

import React, { Component } from 'react'; 
class VelocityExample extends Component { 
    componentDidMount(){ 
     const element = findDOMNode(this.refs.block); 
     const $element = $(element); 

     $element.velocity({scale:2},{ duration: 500, delay: 300}); 
    } 
    render(){ 
     return <div ref="block" >VelocityExample</div>; 
    } 
} 

Dieses Beispiel ist nicht so sauber, aber sie paßt besser für Velocity-Dokumentation.