Использование velocity.js анимации в React

Question

Могу ли я использовать velocity.js анимации в Реагировать компоненты без ее интеграции без скорости реагируют библиотеку? Мне не нравится, что по умолчанию, когда компонент установлен, отображается окончательное состояние анимации. Как заставить анимацию запускать загрузку компонента?

Answer 1

простой пример:

1. скорость импорта

   import Velocity from 'velocity-animate'; 
   

2. затем запустить анимацию в componentDidMount

   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

Первое:

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

Второе:

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>; 
    } 
} 

Этот пример не является настолько чистым, но лучше подходит для Velocity документации.