Question

如何在我的反应应用中使用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

Answer 1

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

Answer 2

我已经在这个问题上苦苦挣扎了几天......非常令人沮丧......速度1.5 ......我一直在升级到16.2的反应。以下组件代码停止使用上面提到的错误...组件只是一个包含在

中的范围...内部速度Velocity.Redirects [propertiesMap]只有fadeIn，fadeOut等。 .not 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();
        }
    });
}
}

要修复它，我在我的根应用程序组件中添加了一个import语句......

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

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

使用velocity.js UI包装动画与速度反应

2 个答案: