How to use the react-motion.TransitionMotion function in react-motion

To help you get started, weā€™ve selected a few react-motion examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github finnfiddle / potion / packages / layout / lib / Layout.js View on Github external
value: function renderAnimated() {
      var _this6 = this;

      var data = this.getAnimatedData();
      return _react2.default.createElement(
        _reactMotion.TransitionMotion,
        {
          defaultStyles: this.transformDefaultStyles(data),
          styles: this.transformStyles(data),
          willEnter: this.getEnterStyle,
          willLeave: this.getExitStyle
        },
        function (interpolatedStyles) {
          return _this6.renderChildren(_this6.transformInterpolatedStyles(interpolatedStyles));
        }
      );
    }
  }, {
github souporserious / react-motion-ui-pack / lib / Transition.js View on Github external
value: function render() {
      var _this4 = this;

      var component = this.props.component;

      var props = (0, _specialAssign2['default'])({}, this.props, checkedProps);

      return _react2['default'].createElement(
        _reactMotion.TransitionMotion,
        {
          defaultStyles: this._getDefaultStyles(),
          styles: this._getStyles(),
          willEnter: this._willEnter,
          willLeave: this._willLeave
        },
        function (currValues) {
          var children = _this4._childrenToRender(currValues);
          var child = null;

          if (!component || component === 'false') {
            if (_react.Children.count(children) === 1) {
              child = _react.Children.only(children[0]);
            } else {
              child = (0, _react.createElement)('span', { style: { display: 'none' } });
            }
github hackoregon / civic / packages / component-library / lib / Pie / Pie.js View on Github external
var defaultStyles = pieData.map(function (datum, index) {
    return {
      key: '' + index,
      data: _extends({}, datum, { index: index }),
      style: _extends({}, datum, { endAngle: datum.startAngle })
    };
  });

  var centerTransform = 'translate(' + width / 2 + ', ' + height / 2 + ')';

  return _react2.default.createElement(
    'g',
    { className: 'pie', transform: centerTransform },
    _react2.default.createElement(
      _reactMotion.TransitionMotion,
      {
        defaultStyles: defaultStyles, styles: motionStyles,
        willEnter: willEnterStyle, willLeave: willLeaveStyle
      },
      function (arcStyles) {
        return _react2.default.createElement(
          'g',
          { className: 'slices' },
          arcStyles.map(function (config) {
            return _react2.default.createElement(
              _reactMotion.Motion,
              {
                defaultStyle: _extends({}, config.style, {
                  endAngle: config.data.startAngle
                }),
                key: config.key,