Question

我可以在 React 组件中使用 velocity.js 动画，而无需在没有 velocity-react 库的情况下进行集成吗？我不喜欢默认情况下，当安装组件时，会显示动画的最终状态。如何让动画在组件加载上运行？

Answer 1

简单示例：

导入速度

import Velocity from 'velocity-animate';

然后在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>;
    }
}

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文档。

在React中使用velocity.js动画

2 个答案: