转自：ant-design/ant-design#3088

<QueueAnim>
<div id="a" key="1"><div style={{position:'fixed'}}></div>
<div id="b" key="2"></div>
</QueueAnim>

对于这样一段带有动画效果的jsx，在动画之行完成之后，a和b两个div的style上会保留一些动画结束以后的css样式信息，比如style="opacity: 1; visibility: visible; transform: translateX(0px);"

由于chrome css3 transform和fixed不兼容，fixed定位的元素无法以浏览器窗口为基准进行定位，而是以被设置了transform样式的div为基准进行定位。

具体表现为，编辑器全屏是用的fixed定位，如果在编辑器上的某个父级元素被设置transform的样式，那么编辑器只能覆盖满这个元素而无法覆盖全屏。

可不可以在动画结束以后清空style里动画相关的css样式呢？

https://jsfiddle.net/qpsx84qp/ 这个是transform、fixed的具体演示。去掉parent的transform样式，显示就正常了。

项目框架运用的是React。
在一个组件中引用rc-queue-anim，在配置webpack文件中的File-Loader时，如果加入obj的文件类型，会导致页面加载失败，页面会出现白屏的现象，在开发者工具中没有报错。我定位了一下，页面渲染到 import QueueAnim from 'rc-queue-anim' 时，就会停止渲染。
期待您的回复，谢谢。

QueueAnim里面的子组件的ref不会回调，父组件怎么拿到QueueAnim子组件的ref。

http://react-component.github.io/queue-anim/examples/simple.html

目前的API, type和animConfig参数只能传字符串或数组, 我尝试了一下只能配置出:

1. 同时呈现相同的进出场动画
2. 同时呈现不同的进出场动画

是否有方法单独配置仅出现离场动画, 而不呈现出场动画.
或仅出现出场动画, 无离场动画的效果?

antd-mobile + react-router-dom 4.0 出现画面拉扯的现象。
能有它们搭配的文档就好了。

https://codesandbox.io/embed/lrv80j2vol

原本默认是被子元素撑大的界面，因为离开动画结束后子元素被删除，导致界面变形。

离开之后能否不进行删除操作，由开发人员自行在onEnd事件中处理。

• 增加开始与结束回调;
• 用 tween-one

• 不停切换会乱。。。
• 不停切换，初始样式不对

http://react-component.github.io/queue-anim/examples/switch-enterForcedRePlay.html

先看图，根据条件列表过滤，搜索的时候因为会有相同的项结果炸了，而且以前多次 render 闪烁的问题又出现了。

我试图编写一个vue版本，但是由于内部逻辑过于复杂，未能成功，

type在官网上有Array,但是定义文件中没有，提个pr了，还有easy

Due to a recent security incident, all user tokens have been invalidated. Please see the status page for more details.
To generate a new token, visit your tokens settings page or run npm login.
code 404

例如 A B C 三个div :

我移除删除其中的B, 此时B会消失, 然后C在原本的位置播放B原本应该播放的动画, 然后移动到B的位置

Hey there.

I came across an alert for this project on LGTM when going through results in a number of projects:

This code looks incorrect, as the ! operator binds more tightly than >=. The result is that the expression is interpreted as:

const paused = this.keysToEnterPaused[key] && (!this.keysToLeave.indexOf(key)) >= 0;

And as the result of !this.keysToLeave.indexOf(key)) will be a boolean, and true >= 0 and false >= 0 both evaluate to true... this is equivalent to:

const paused = this.keysToEnterPaused[key] && true;

Which is equal to:

const paused = this.keysToEnterPaused[key];

I tried to determine what the expression that was meant here was, but from the comments and code, could not determine which of these was meant:

1. !(this.keysToLeave.indexOf(key) >= 0)

2. this.keysToLeave.indexOf(key) >= 0

If it was (1), it would probably be better to write it as this.keysToLeave.indexOf(key) === -1.

(Full disclosure: I'm part of the team behind LGTM.com)

• use tween-one

如 subMenu 里需要添加 isSubMenu 才会触发菜单回收动画, subMenu 用的 isSubMenu 判断, queue-anim 里是手动添加的，所以导至 router 时属性有 contextTypes 出来报错。v1.4.0 将新增 componentTypeAttr: Object, 不再去遍历 child 的 type 了。。
如 subMenu 需设置:

<QueueAnim
  component={Menu}
  style={{ width: 240, margin: 20 }}
  componentProps={{ mode: 'vertical' }}
  componentTypeAttr={{ isSubMenu: 1 }  or { sub1: { isSubMenu: 1 }} }
  type="left"
>
  <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
    <MenuItemGroup title="Item 1">
      <Menu.Item key="1">Option 1</Menu.Item>
      <Menu.Item key="2">Option 2</Menu.Item>
    </MenuItemGroup>
    <MenuItemGroup title="Iteom 2">
      <Menu.Item key="3">Option 3</Menu.Item>
      <Menu.Item key="4">Option 4</Menu.Item>
    </MenuItemGroup>
  </SubMenu>
</QueueAnim>

记录下

Why child input component not re-rendering.
https://codesandbox.io/s/nervous-glitter-vrdkj

<QueueAnim delay={300} className="queue-simple" animConfig={[ { opacity: [1, 0], translateY: [0, 50] }, { opacity: [1, 0], translateY: [0, -50] } ]} onEnd={this.clearQueueAnimStyle}> <section className="content" key="animation"><child></child></section> </QueueAnim>
发现在子组件里的componentDidMount比父组件的componentDidMount晚执行。去掉delay={300}也是一样

Try npm install @types/rc-queue-anim if it exists or add a new declaration (.d.ts) file containing declare module 'rc-queue-anim';

先看图

代码中 Clients 组件在 2 号位置

当 Clients 出场的时候 Clients 跑到了最后。

请考虑针对一些被会覆盖的属性特殊处理

做法按照 example router 的做法去做，几乎没有改变。

效果是：from 在做离场动画的同时，to 在做进场动画。

问题是：to 路由会因为 from 路由的高度被压在下面，必须等到 from 完成离场删除节点之后，to 路由恢复位置。从而导致每次转场 to 都会有位移。

请问如何解决？谢谢。

问题：
动画结束后会在动画元素上添加行内样式opacity: 1; transform: translate(0px, 0px);
transform的特性会导致子元素z-index fixed 等一些其他属性异常

目前解决方案：
在onEnd事件里手动移除行内样式

期望：
动画执行完毕后移除行内样式opacity: 1; transform: translate(0px, 0px);

#15

Component inside QueueAnim is not being rendered on server side. Is there any setting for this or it doesn't support the server side rending ?

My code is like:

Any help deeply appreciated. Thanks in advance

你好，
react从15.5.4开始不鼓励自带的propType了。
我注意到queue-anim的jsx源码已经用到了独立的prop-types包, 但是我npm下载到的最新的js文件里面还是引用的react.PropTypes(node_modules/rc-queue-anim/lib/QueueAnim.js, line number: 478)
不知道是否可以更新npm publish.

谢谢！

希望作者出一个typescript版本，现在好像不支持typescript

组件1多渲染了一次

在 API 文档中，ease 这个属性支持 array 和 string 。

而 array 是形如 ['easeOutQuart', 'easeInOutQuart'] 这样的，将已定义的贝塞尔参数名称传进去。

请问，是否支持形如 [.42,0,.58,1] 这样形式的参数来定义运行的曲线？

如果不支持，请问有什么其他方案可以自定义吗？

感谢！

Only begin the animation once the element has entered the viewport. This makes it easy to make animations happen has the user scrolls down the page.

There should also be a threshold so that the developer may choose to only activate the animation once the element is 30% up the page.

Example: https://michalsnik.github.io/aos/

LESS:

.ui-box {
  margin-top: 10px;
  margin-left: 11px;
}
.ui-box {
  > div {
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-left: -1px;
    border: 1px solid red;
    display: inline-block;
  }
}

JSX:

import React from 'react';
import ReactDOM from 'react-dom';
import QueueAnim from 'rc-queue-anim';

const list = [
  [
    <div key="1">依次进入1</div>,
    <div key="2">依次进入2</div>,
    <div key="3">依次进入3</div>,
    <div key="4">依次进入4</div>,
    <div key="5">依次进入5</div>
  ],
  [
    <div key="6">依次进入6</div>,
    <div key="7">依次进入7</div>,
    <div key="8">依次进入8</div>,
    <div key="9">依次进入9</div>,
    <div key="10">依次进入10</div>
  ]
];

class App extends React.Component {
  state = {
    id: 0,
    list: [...list[0]]
  };

  handleClick = () => {
    const id = this.state.id === 0 ? 1 : 0;

    this.setState({ id, list: [...list[id]] });
  };

  render() {
    return (
      <>
        <button onClick={this.handleClick} style={{ marginTop: 10, marginLeft: 10 }}>
          切换列表
        </button>
        <QueueAnim type="bottom" className="ui-box" interval={[100, 0]} duration={[450, 0]}>
          {this.state.list}
        </QueueAnim>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

关闭出场动画，切换新节点入场动画会消失，粗略看了下代码应该是出场动画关闭后并未触发正常情况下的出场逻辑处理，保存了以前的状态值，所以必须设置 forcedReplay 才正常（入场动画关闭估计也存在类似问题）。

包含在QueueAnim内的元素是Material-UI中的Card控件:
http://www.material-ui.com/#/components/card

浏览器版本:
Chrome52, 且仅在Chrome下执行动画时有闪烁效果, Firefox下无此问题

Route 页面切换 的时候入场没有动画效果，刷新才有入场的效果。 请问怎么配置怎么写的啊

我参考了motion.ant.design上的例子，用bool state控制是否显示，但当state为false时，没有出场动画，而是瞬间消失。把各个例子都尝试了，仍然没有成功，请问可能是什么原因呢？
版本：
"antd": "^1.1.0",
"react": "^15.0.1",
"rc-queue-anim": "^0.11.9",

  getInitialState(){
    return {
      show:true,
      items: [{
        children: '依次进入1',
        key: 1,
      }, {
        children: '依次进入2',
        key: 2,
      }, {
        children: '依次进入3',
        key: 3,
      }],
    }
  },

<QueueAnim leaveReverse>
              {this.state.show ? this.state.items.map((item) => <div key={item.key}>
                {item.children}
              </div>) : null}
            </QueueAnim>

appear 为 false, 刷新动画会重走一遍

[1,2,5,6] => [1,2,3,4,5,6] 时, 1, 2, 5, 6,如果不是刚在动画序列里，不应该存在动画需求，不该替换标签。。

留坑，再填。。。

Using QueueAnim & React Router, with the example: http://ant.design/components/queue-anim/#/anim-demo-router?_k=cs5hek

When navigating between routes quickly, if a previous animation hasn't finished yet and you switch route, the console warning appears:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

To reproduce: Open the example and open the console. Quickly switch between tabs and you'll see the error appear.

一开始没注意，应该还是 #58 的问题~

感觉是比较常用的几个动画之一. 不位移, 仅渐变, 建议可以加进默认的几个动画内.;

虽然直接用 animConfig 可以做到, 不过每次要写一遍也挺麻烦.

昨天更新了 QueueAnim 的新版本后导致的问题. 之前没有.

一个组件中包含两个动画, 一个是主体, 一个是背景. 主体后进先出, 背景先进后出.

问题: 背景的 position 根据 class state 变化, 但是使用 if else 后出场的背景在 DOM 中 position 却没有变化.

然后尝试去除 class state 将组件转为 function component, 然后直接操作 DOM 改动 position. 但是经计算后的 position 变量已经变化, DOM 中的 position 却没有及时变化.

然后发现是原包里面就带着的

然后其他的几个组件也有这个问题

node: 8.4
npm: 5.3
os: win 7 x64

failed at postinstall stage, package: fsevents.

i switched to v1.1 and installed successfully.

npm log:

7212 silly postinstall [email protected]
7213 info lifecycle [email protected]~postinstall: [email protected]
7214 verbose unlock done using C:\Users\Administrator\AppData\Roaming\npm-cache_locks\staging-948eb1e4f981cfbe.lock for E:\souceCode\spring-breeze\node_modules.staging
7215 verbose stack Error: EPERM: operation not permitted, lstat 'E:\souceCode\spring-breeze\node_modules\fsevents\node_modules\getpass\node_modules'
7216 verbose cwd E:\souceCode\spring-breeze
7217 verbose Windows_NT 6.1.7601
7218 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "rc-queue-anim" "-D" "--registry=https://registry.npm.taobao.org"
7219 verbose node v8.4.0
7220 verbose npm v5.3.0
7221 error path E:\souceCode\spring-breeze\node_modules\fsevents\node_modules\getpass\node_modules
7222 error code EPERM
7223 error errno -4048
7224 error syscall lstat
7225 error Error: EPERM: operation not permitted, lstat 'E:\souceCode\spring-breeze\node_modules\fsevents\node_modules\getpass\node_modules'
7225 error { Error: EPERM: operation not permitted, lstat 'E:\souceCode\spring-breeze\node_modules\fsevents\node_modules\getpass\node_modules'
7225 error stack: 'Error: EPERM: operation not permitted, lstat 'E:\souceCode\spring-breeze\node_modules\fsevents\node_modules\getpass\node_modules'',
7225 error errno: -4048,
7225 error code: 'EPERM',
7225 error syscall: 'lstat',
7225 error path: 'E:\souceCode\spring-breeze\node_modules\fsevents\node_modules\getpass\node_modules' }
7226 error Please try running this command again as root/Administrator.
7227 verbose exit [ -4048, true ]

PS: i did run the install commad as admin

• 1. 删除占位符 QueueAnim.jsx#L319. 没有用。。可复用到 ant motion table enter and leave; 目前在 table 报错，，不可用 div

• 2. animConfig 支持 tweenOne 的 timeline 写法:

<QueueAnim animConfig={[{ x: 100 }, { y: 100 }]} />
或
<QueueAnim animConfig={[{ x: [0, 100] }, { y: [0, 100] }]} />

• 3. 多次 render 处理，，，currentChildren 用 state.children,,判断当前显示元素与 nextChildren 对比..

• ant motion 列表动画报错 https://motion.ant.design/exhibition/demo/list-anim

如图，数据是父组件 ajax 异步 props 过来的，都设置有唯一稳定的 key，请求后新数据入场，旧数据没被删除，onEnd 事件也没有旧数据的出场回调，如果不设置 interval={[100, 0]} duration={[450, 0]} 旧数据在动画完成后会被删除！