使用velocity.js UI包动画和velocity-react答案

【问题标题】：Using velocity.js UI pack animations with velocity-react使用velocity.js UI包动画和velocity-react
【发布时间】：2018-01-20 01:52:42
【问题描述】：

如何在我的 react 应用中使用 velocity.js UI 包效果？使用以下代码，fadeOut 动画可以正常工作，但slideRightIn 不能。

import { VelocityTransitionGroup } from 'velocity-react';
import 'velocity-animate/velocity.ui';


class ShowForm extends React.Component {
  [...]
  render() {
    return (
     <div>
       <VelocityTransitionGroup enter={{animation: "slideRightIn"}} leave={{animation: "fadeOut"}} duration="1">
         {this.getActiveStep()}
       </VelocityTransitionGroup>
     </div>
    );
  }
}

控制台中的错误是Velocity: First argument (slideRightIn) was not a property map, a known action, or a registered redirect

【问题讨论】：

我在让 velocity-react 和 velocity-animate 处理我的项目（基于 webpack）时遇到问题。我不断收到windows is undefined 或stagger: undefined.stateduration 错误。除了我要使用它们的组件 JSX 之外，我不确定在哪里导入或需要这些模块。你在哪里做的？
文档说您需要在应用程序的根组件中导入库。关于你的错误，我从来没有遇到过，所以无能为力。

标签： javascript reactjs velocity.js

【解决方案1】：

所以这个问题的原因是动画名称是transition.slideRightIn，而不仅仅是slideRightIn。

【讨论】：

【解决方案2】：

几天来我一直在努力解决这个问题...非常令人沮丧...速度 1.5...我一直在升级以响应 16.2。以下组件代码因上述错误而停止工作...该组件只是一个包装在

中的跨度

...Velocity.Redirects[propertiesMap] 的内部速度只有fadeIn、fadeOut 等...没有transition.xxx

import React from 'react';
import ReactDOM from 'react-dom';
import Velocity from 'velocity-animate';
import PropTypes from 'prop-types';

class StatusMessage extends React.Component {...

  _animateText(text) {
        var textNode = ReactDOM.findDOMNode(this.refs.textSpan),
        that = this;
    Velocity(textNode, "transition.shrinkIn", {
        duration: 150,
        delay: 50,
        begin: function() {
            that.setState({
                text: text
            });
            that.animating = true;
        },
        complete: function() {
            that.animating = false;
            that.forceUpdate();
        }
    });
}
}

为了解决这个问题，我在我的根 App 组件中添加了一条导入语句...

import 'velocity-animate/velocity.ui';
class App extends React.Component { ...

我希望这对其他人也有帮助。干杯！

【讨论】：