react-component / animate Goto Github PK

The Animation component adds the <transition>-enter class when the transition is about to be done. Though, for components that perform synchronous DOM read operations during mount, the component will be drawn immediately and only later the <transition>-enter class will be added. This obviously causes issues when doing page transitions (e.g.: animating opacity).

I've had to do a workaround to circumvent the issue:

class Application extends Component {
    componentWillUpdate(prevProps) {
        prevProps.location.pathname !== this.props.location.pathname && this._toggleAnimationClass(true);
    }

    render() {
        return (
            <div id="application">
                <div id="page">
                    <Animation component="div" transitionName="page-transition"
                        ref={ (ref) => { this._animationComponent = ref; } }
                        onEnter={ () => this._toggleAnimationClass(false) }>
                      { React.cloneElement(this.props.children, { key: this.props.location.pathname }) }
                    </Animation>
                </div>
            </div>
        );
    }

    _toggleAnimationClass(active) {
        ReactDOM.findDOMNode(this._animationComponent).classList.toggle('page-transition', active);
    }
}

export default Application;

Now, I set the initial CSS styles I want using .page-transition > .page:first-of-type instead of .page-transition-enter.

Let me know if you want a reproducible project to debug.

Hello,

The latest release of this project is not React 0.14 compatible and, hence, is the underlying cause of console warning/error messages for its dependents.

Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

https://github.com/react-component/animate/blob/master/src/AnimateChild.js#L17

hi, css-animation 1.4.0 added the module field in its package.json (yiminghe/css-animation@2005b5a) and now when rc-animate is a dependency of a create-react-app project the build fails with

css-animation' does not contain an export named 'isCssAnimationSupported

i've also created an issue on css-animation yiminghe/css-animation#13

Hey sir. Thanks a bunch for this library!

Not sure whether that's intended or not, but setting exclusive={true} isn't ensuring that an element currently in the DOM is allowed to finish its leave transition before the next one entering.

Is that a bug, or am I misinterpreting how it works?

Thanks!

kissy中怎么获取已经初始化后的组件，并重新赋值，如：combobox,该怎么处理呀，谢啦

Children could be null when I use preact, change the toArrayChildren to something like this would solve this problem.

export function toArrayChildren(children) {
  const ret = [];
  React.Children.forEach(children, (child)=> {
    if(child != null) ret.push(child);
  });
  return ret;
}

Same as react-component/util#41:

Now "licenses" field of package.json contains single "MIT" string

According to spec, the "license" (not "licenses") field should be used to specify the single "MIT" license.

So, field should be renamed "licenses" => "license" I believe.

Thanks!

I want to create a simple animation similar to $.animate would do in React

The problem is that I have another component triggering the event and not the one I actually want to perform the animation on triggering the animation

I bascially just want to change the background color and text color and then switch it back quickly to create a 'flash' type of animation

Is it possible with this library?

Getting this warning. I'm not using the rc-animate library.

Animate emits an exception if any of its children are null/undefined. Ideally I think it should use the same logic as React.Children.toArray() and simply ignore invalid children?

Not ignoring null children means patterns like this don't work:

React.createClass({
  someOtherRenderFunction() {
    if (!this.state.spanIsNotVisible) {
      return;
    }

    return <span />;
  },

  someRenderFunction() {
    if (!this.state.divIsNotVisible) {
      return;
    }

    return <div />;
  },

  render() {
    return (
      <Animate>
        {this.someRenderFunction()}
        {this.someOtherRenderFunction()}
      </Animate>
    );
  }
});

This component is normally valid without Animate.

@Keyframes test-fade {
0% {
opacity: 0;
transform: translate3d(100px, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

只会执行 opacity 动画效果

There is a typedef file in the source of the project but it doesn't end up in the npm package so my code can't import it.

Contents of installed package:

benoithiller@Benoits-MacBook-Pro 0 % find node_modules/rc-animate
node_modules/rc-animate
node_modules/rc-animate/LICENSE.md
node_modules/rc-animate/HISTORY.md
node_modules/rc-animate/README.md
node_modules/rc-animate/package.json
node_modules/rc-animate/lib
node_modules/rc-animate/lib/util
node_modules/rc-animate/lib/util/animate.js
node_modules/rc-animate/lib/util/motion.js
node_modules/rc-animate/lib/util/diff.js
node_modules/rc-animate/lib/Animate.js
node_modules/rc-animate/lib/CSSMotionList.js
node_modules/rc-animate/lib/AnimateChild.js
node_modules/rc-animate/lib/CSSMotion.js
node_modules/rc-animate/lib/ChildrenUtils.js
node_modules/rc-animate/es
node_modules/rc-animate/es/util
node_modules/rc-animate/es/util/animate.js
node_modules/rc-animate/es/util/motion.js
node_modules/rc-animate/es/util/diff.js
node_modules/rc-animate/es/Animate.js
node_modules/rc-animate/es/CSSMotionList.js
node_modules/rc-animate/es/AnimateChild.js
node_modules/rc-animate/es/CSSMotion.js
node_modules/rc-animate/es/ChildrenUtils.js

Installed version: [email protected]
package manager: [email protected]
node version: v14.5.0

感觉有了 CSSMotion，Animate 和 AnimateChild 没必要特地动了。

直接在 rc-animate 里发个小版本把 CSSMotion 加上就好了，以后有新的陆续迁移过来用 CSSMotion。没时间碰的就还是用老的 Animate。

@yesmeck @afc163

I'm using this package inside application with typescript, and I'm getting the next error:

Could not find a declaration file for module 'rc-animate'. 'node_modules/rc-animate/lib/Animate.js' implicitly has an 'any' type.
  Try `npm install @types/rc-animate` if it exists or add a new declaration (.d.ts) file containing `declare module 'rc-animate';`

Since React 16 allows return fragments in component, we can return this.props.children directly if React 16 is detected.

ERROR:

Uncaught TypeError: Cannot read property 'children' of undefined
    at getChildrenFromProps (modules.js?hash=c3bb3b2…:122940)
    at new Animate (modules.js?hash=c3bb3b2…:122968)
    at modules.js?hash=c3bb3b2…:36983
    at measureLifeCyclePerf (modules.js?hash=c3bb3b2…:36764)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (modules.js?hash=c3bb3b2…:36982)
    at ReactCompositeComponentWrapper._constructComponent (modules.js?hash=c3bb3b2…:36968)
    at ReactCompositeComponentWrapper.mountComponent (modules.js?hash=c3bb3b2…:36876)
    at Object.mountComponent (modules.js?hash=c3bb3b2…:29710)
    at ReactDOMComponent.mountChildren (modules.js?hash=c3bb3b2…:36062)
    at ReactDOMComponent._createInitialChildren (modules.js?hash=c3bb3b2…:33263)

FIX:
https://github.com/react-component/animate/blob/master/src/Animate.js#L70
change this.props to props

Hi,

I'm trying to animate an image on appear, enter and leave with JS.
i'm doing something like that:

<Animate
          component=""
          transitionAppear={false}
          transitionEnter={false}
          transitionLeave={false}
          onEnd={this.animateEnded.bind(this)}
          animation={this.state.animationObject}>
          {
            this.state.imageStatus &&
            <img
              key={new Date()}
              ref="image"
              src={this.state.currentImgSource}>
            </img>
           }
</Animate>

The appear event work correctly and is triggered but the others are not.
I only change imageStatus state to true or false if img is loaded or not.

When i set imgStatus state to false the img disappear without the leave animation and the appear animation is triggered again...
it should not, right ? :)

(i added a key on the img tag, with a date, i don't know if i have to do this)

I don't figure out what i'm doing wrong...
Thanks

https://github.com/react-component/animate/network/dependencies

Hi,

rc-animate seems to be incompatible with css-modules right now. More context about this issue can be found here. If transitionName is an object, appearActive, enterActive and leaveActive properties are not used.

There's also an issue in css-animate because '-active' is hardcoded for any animation.

Css modules seems to have quite a big adoption right now, so a backwards compatible change would make sense in my opinion.

Steps to reproduce:

• Clone project
• Run npm install

What happened:
The republish script was run, resulting in this error:

npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> [email protected] prepublish /Users/holgerfrohloff/projects/OSS/animate
> rc-tools run guard

(node:8838) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. Use emitter.setMaxListeners() to increase limit
rc-tools run guard
fs.js:27
const { Math, Object } = primordials;
                         ^

ReferenceError: primordials is not defined
    at fs.js:27:26
    at req_ (/Users/holgerfrohloff/projects/OSS/animate/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/holgerfrohloff/projects/OSS/animate/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/holgerfrohloff/projects/OSS/animate/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepublish: `rc-tools run guard`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/holgerfrohloff/.npm/_logs/2019-08-26T09_18_16_243Z-debug.log

To solve this error for me locally, I removed the prepublish script from the package.json.

license-checker-webpack-plugin is surfacing an error
LicenseError: License: [email protected] is unlicensed

pretty sure this key shouldn't be plural

Since current Animate component mixed with js operation, it's not easy for virtualized component animation (which need calculate style after didUpdate). Here is the plan for adding a new sub component called CSSTransition using render props.

Draft:

// Return customize style
onAppearStart = (ele) => ({ height: 0 });

<CSSTransition visible={show} transitionName="transition" onAppearStart={onAppearStart}>
  {({ style, className }) => (
    <div className={className} style={style} />
  )}
</CSSTransition>

@afc163 @yesmeck

Github repo version is 2.3.4, but npm repo's 2.3.3.
Can you please push to npm repo?

i have issues with ant-design

with node 10

Error: Cannot find module 'css-animation'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/bangvu/Desktop/Projects/wtt/wttcms-frontend/node_modules/rc-animate/lib/AnimateChild.js:35:21

with node 12

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/bangvu/Desktop/Projects/wtt/wttcms-frontend/node_modules/rc-animate/lib/AnimateChild.js:35:21)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19) {

这个问题是在使用 jest 的 toMatchSnapshot 时候发现的，debug 了一下发现是下面语句无论如何都会在 mock 的Date.now = jest.fn(() => 1507453184412) 之前执行，所以建议这个语句是不是应该放到 Animate.js class 的内部更好？

const defaultKey = `rc_animate_${Date.now()}`;

This method will be removed in the next major version of React (https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md).

Here is some more info about replacing it: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

I'm creating a dropdown/collapse that has 2 animations when clicked: 1. an arrow that rotates 2. the content slides open/close. The arrow animation is triggered using pure CSS and the sliding content is added/removed to DOM so I use rc-animate. The issue is that the arrow doesn't animate in Firefox but it works in Chrome/Safari.

Here is a runnable example https://codesandbox.io/s/Wn5j4G9Qv

OS: Mac OS X Sierra
Firefox 52.0.2 (64-bit)
Chrome 57.0.2987.133 (64-bit)
Safar: 10.1

Currently Animate use css-animation to set the AnimateChild dom class which is not controlled by react.
This caused component reset className when react render commitWork (such as setState, props update):

Whenever I remove the Alert component from it's closeable icon I get this warning. What might be going wrong on my end?

The Problem

rc-animate depends on rc-util, which peer-depends on react and react-dom. The latest version of Yarn (2.0 / berry) does not handle this peer dependency inheritance automatically, instead requiring peer dependencies to be explicitly specified at every level of the dependency tree:

# not ok
project
├── react
├── react-dom
└── rc-animate
    └── rc-util
        ├─peer─ react
        └─peer─ react-dom

# ok
project
├── react
├── react-dom
└── rc-animate
    ├─peer─ react
    ├─peer─ react-dom
    └── rc-util
        ├─peer─ react
        └─peer─ react-dom

As currently configured, rc-animate produces the following console warnings when being added to a yarn 2.0 project:

$ mkdir bugreport
$ cd bugreport
$ yarn set version berry
$ yarn add react
$ yarn add react-dom
$ yarn add rc-animate
➤ YN0000: ┌ Resolution step
➤ YN0002: │ rc-animate@npm:2.10.3 doesn't provide react@^15.0.0 || ^16.0.0 requested by rc-util@npm:4.20.1
➤ YN0002: │ rc-animate@npm:2.10.3 doesn't provide react-dom@^15.0.0 || ^16.0.0 requested by rc-util@npm:4.20.1
➤ YN0000: └ Completed in 6.13s
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0.34s
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1.82s
➤ YN0000: Done with warnings in 8.31s

This requirement is documented here and explained in detail here.

The Solution

package.json needs a peerDependencies property that matches the contents of the one in rc-util.

Note

This same issue applies to all react-component repos that depend on rc-util or any other package that peer-depends on react and react-dom. Presumably, this is every project until the react-component umbrella. I'm too lazy to create separate issues on each one; is there a better way to report this issue across the entire project?

import {CSSMotion} from 'rc-animate'
打印出来cssmotion为undefined
版本2.8.3

Animate: isMounted is deprecated. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.

The following warning is shown upon upgrading to React 16.9.0:

      Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

      * Move data fetching code or side effects to componentDidUpdate.
      * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
      * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

      Please update the following components: Animate

希望作者可以更新下

https://codesandbox.io/embed/upbeat-babbage-kyr7p

css modules 会把样式做一次 hash，所以结果会变为：

.transitions__appear__2v7gv {
  opacity: 0.01;
}
.transitions__appear-active__2guc1 {
  opacity: 1;
  -webkit-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}

所以需要把 active 的 class 单独设置，而不是现在 css-animation 里面简单的使用惯例 -active

React 官方的 animate 插件可以支持 css modules，因为它可以单独设置每个样式：
http://facebook.github.io/react/docs/animation.html#custom-classes

另外，现在 rc-animate 不支持设置 transitionName 设置为 Object，而是只允许 string，所以没办法像 ReactCSSTransitionGroup 一样直接把 css modules 的样式对象设置到 transitionName。
例如：

import transitions from './transitions.css';
...
    <ReactCSSTransitionGroup component={FirstChild} transitionName={transitions} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
      {overlay}
    </ReactCSSTransitionGroup>

直接就能把对应的几个样式设置上去。

warning antd > rc-tree-select > rc-trigger > rc-animate > fbjs > [email protected]: core-js@<2.6.6 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.

When the component property is set to"", it will only render the first child node. it will cause a result that the leave animation is executing, because only render the first child , so this.refs is no reference to the child node behind first. so the leave animation is not normal , It is advisable to give a warning when there is a leave animation

当设置 component 属性 为 ""的时候， 就只会渲染第一个孩子节点，导致 this.refs 没有引用到后面的孩子节点，所以除第一个外的后面的孩子节点的离开动画不会正常触发， 建议在设置离开动画的时候，如果设置component=""时 ， 给一个警告信息

This commit fdec45a

Has broken our code that requires in this module, as it has changed the export to require .default(). Could a patch be released to revert this change and a major bump be released with this change so our services dependent on 2.x.x don't break?