rc-queue-anim如何只要进场动画禁用出场动画

• 编辑区块的一个调整，目前直接在页面里调整模块与编辑。

• 网站响应式

• 模板响应式

• 编辑时的样式使用css，手机端需要可编辑 css 文件,

• 隐藏区块，web 与 phone 呈现的内容，需要隐藏的收藏容器。

动效的组件应该放在dependencies中吧,devDependencies是用在开发阶段的

common.js:18 Uncaught SyntaxError: Unexpected identifier

在git上查看react 动画解决方案的时候.无意中看到你们的rc-tween-one库.你们是自己写着玩的?还是公司的项目??

自由搭配模版(模块正在忧化中) 中 “忧“应该改为“优”

• 首页调整。
• 内页结构样式
• README 重写

现有的文档基本上是针对单个组件的，请问如何配合ant-design的表格组件，实现增删改效果呢？

比如新增一行，渐进，删除一行渐出，更新一行给予提示？

前段大菜鸟提问。 谢谢。

你好，我下载的Home项目引入到项目工程里面，为了方便，我全部放到了components下面，引入和基本流程没有问题。在家里的win10上面启动没有报错，在win7上面启动就报错了，错误原因：
in ./src/components/Index/less/antMotion_style.less
Module build failed: ModuleBuildError: Module build failed: JavaScript evaluation error: 'ReferenceError: colorPalette is not defined'
@ F:\Web\mabyloveProjects\mabylove\weblove\node_modules.2.6.0@antd\lib\button\style\index.less (line 11, column 2)
near lines:
.btn;
.btn-default;

at DependenciesBlock.onModuleBuildFailed (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.0.6.9@webpack-core\lib\NormalModuleMixin.js:315:19)
at nextLoader (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.0.6.9@webpack-core\lib\NormalModuleMixin.js:270:31)
at F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.0.6.9@webpack-core\lib\NormalModuleMixin.js:292:15
at context.callback (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.0.6.9@webpack-core\lib\NormalModuleMixin.js:148:14)
at F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.2.3@less-loader\index.js:68:16
at F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\render.js:33:38
at F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\parse.js:63:17
at Object.finish [as _finish] (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\parser\parser.js:183:28)
at Object.ImportVisitor._onSequencerEmpty (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\visitors\import-visitor.js:35:14)
at ImportSequencer.tryRun (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\visitors\import-sequencer.js:50:14)

@ ./src/components/Index/index.jsx 57:0-38

便于清晰的认识到：我特意截了图：
构建组件的时候，在index.jsx中出现错误：(其实就是antMotion_style.less样式报错)

接着就是错误的位置啦

接上一个的错误的具体位置

希望给一个解决方法。谢谢

在TweenOne中使用发现，scale值如从0到1显示，动画过程中会出现非常模糊的现象，测试中发现缩放值在0.5以下就会出现模糊，而同样从0到1的缩放效果在QueueAnim中则显示正常。
望排查，谢谢。

项目中使用 没有.d.ts 感觉很难受

无线端还显示。

https://motion.ant.design
网站上，点击进入“动效模板”后，点击生成代码，无任何响应（应该生成一个文件并启动下载吧？）
后者应该如何进行操作才能给导出模板代码呢？

浏览器版本：
firefox51.0.1（32位）

给个简单的示例就好。

如果只对一两行操作很完美。

当进行切换页的时候，上一页的元素dom元素还在，会撑开整个table，很难看

如果设置transitionLeave=false，就没有离场动效了

so,怎么样才能更优雅

ant-design/ant-design#2040

1. 选择完成以后，不能返回重新选择（浏览器返回可以，但是无记录）有点麻烦，因为之前选的时候不能预览，只有点了完成才能预览；
2. 我主要用的是生成代码这个功能，代码下下来以后发现配置的地方有两个了（不知是不是必须）感觉最好把每个的配置代码放在各自的组件内部就很好（nav、content、footer等）；
3. nav1，footer1，content3，名字好奇怪呀，还需要自己改名字；
4. 其它还好，有些样式是全局样式，建议在最外层套一层；

做下调研，

1. 如果你使用了我们 ant motion 的组件。
2. 如果你使用了 landing page 模板的。
3. 对 ant motion 有任何建议。

如果您和您的公司或组织使用了 Ant Motion ，非常感谢您的支持，欢迎留下公司或产品名，您的回复将成为维护者、社区用户和观望者的信心来源。

在不泄露信息的前提下，建议把截图晒一晒~
无关回复将会定期删除

推荐回复格式：

- 产品：
- 公司或组织：（如果可以）
- 链接：（如果可以）
- 截图：（如果可以）

看着挺好看,-_-.
谢谢.

Tween的单元素动画是不是不能对组件施加？我对Tween的子组件加了旋转的效果，结果不是绕着自身中心而是屏幕中心旋转

Can i look for it somewhere? If it doesnt exists please create it. Your solution is awesome. World waits ;)

使用例子中的代码：

import React from 'react';
import ReactDOM from 'react-dom';

import QueueAnim from 'rc-queue-anim';
ReactDOM.render(<QueueAnim>
  <div key="demo1">依次进场</div>
  <div key="demo2">依次进场</div>
  <div key="demo3">依次进场</div>
  <div key="demo4">依次进场</div>
</QueueAnim>, document.getElementById('root'));

控制台报错：

invariant.js:39 ：

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

环境
···
"antd": "^1.1.0",
"atool-build": "0.6.x",
"babel-plugin-antd": "0.3.x",
"chart.js": "^1.1.1",
"es3ify-loader": "^0.1.0",
"history": "^2.1.1",
"lodash": "^4.13.1",
"rc-queue-anim": "^0.11.9",
"react": "0.14.x",
"react-chartjs": "^0.7.3",
"react-dom": "0.14.x",
"react-redux": "^4.4.5",
"react-router": "^2.4.0",
"react-router-redux": "^4.0.4",
"redux": "^3.5.2",
"redux-thunk": "^2.0.1",
"superagent": "^1.8.3"
···

this.moveAnimation = [
      // 透明度变化
      { opacity: 1, duration: 300 },
      // 移动
      {
        translateX: `${end.left}px`,
        translateY: `${end.top + end.height}px`,
        duration: 600,
        delay: 300
      },
      // 消失
      { opacity: 0, duration: 600, delay: 150 },
    ];

svg 里面 的 g 标签设置的动画。

动画的步骤是上面那样

问题是，在 safari 里面，元素的初始位置跑到了浏览器的左上角。

chrome 一切正常。

Hi, I am big fan of your product.
Do you have version history or changelog stuff?
I think version number is quite necessary.

Thanks.

在一个表格中，如果存在有输入框，并且输入框内有内容的时候，如下图

这个时候操作删除数据的操作，输入框的内容就会先变化，然后再执行删除的动画效果。如下图，输入框内的数字会全部先变为0，然后再是leave的动画。

在使用scrollScreen进行滚动翻页时，由于鼠标或触控板的滚动时间长于scrollInterval的设定时间时，会发生连续滚动多页的情况，即使在默认值1000时依然会有这种现象发生，而实际1000已经是很长的一段时间了，能不能锁定一次只能滚动一页，不管一次滚动持续了多久？望告知，谢谢。

• 修改页面元素高度后，，edit-state高度未刷新。

• content10 滚动时初始高度错误 。。。banner-anim 里高度计算错误。

• 切到手机窗口，底下多一个空 div

• content4 数据不正确

How to edit opening animation
http://codepen.io/telatkaya/pen/zNMXjX

class userCenterPage extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.elem = ReactDOM.findDOMNode(this.refs.headerBackground);
        this.elem2 = document.getElementById('headerBackground');
    }

    render() {
        return (
            <QueueAnim delay={0} type="bottom">
                <div key="a">
                    <div className="headerBackground" ref="headerBackground"></div>
                </div>
            </QueueAnim>
        )
    }
}

这样出来的this.elem和this.elem2都是null的
有什么方法可以解决吗

overPack设置了在屏幕下方 50％ 时开始播放动画，希望可以有屏幕上半部分的‘overPack’。

Try fix it or update package.json: "react": "15.3.x"

动画做的很好，很喜欢，想请教一下演示例子的一些技巧
这个页面 http://motion.ant.design/language/transition
我看到你用了个.mp4，来做演示，请教下这个mp4是咋弄的，
我猜想：
1 里面的内容效果是先写个网站【感觉这样太费时间了】，然后用视频录制？
2 是不是有咋工具可以方便操作这样的演示的？

方便指导一下吗？

既然无法删除Issues，就留下我的解决办法，方便以后的人😃
如果npm start失败：

1. 先确认是否执行npm install安装依赖的模块。
2. install慢或者失败，参考npm国内镜像设置方法

是否考虑支持支持 IE8 浏览器？

• 首页改版
• 网站架构调整
  • 信息结构
  • 页面逻辑
  • 功能区块重新整理
• 模板这块提供下载
• 添加页面加载动画
• 404页面设计
• scollAnim 内容更新
• load 在 windows 下变量错误 ，不能用t
• 动效demo 6个。

后期再整：

• 小动画编辑器

• 可视化编辑忧化。
  左侧导航。

  • 可添加删除模块。
  • 对背景处理。
  • 调整页面布局和添加区块
  • 其它功能编辑

  双击开启编辑后：

  • 拖动可编辑位置，百分比变成绝对值。
  • 双击后编辑区块内容
  • 调整样式

动效模板更换背景图片无法生效
视频教程中有保存按钮，但是网页上没有，其他的参数设置后，效果生效，但是背景图片更改后，不起作用。
经过测试需要修改为:url(图片地址)才可以

下边的div会遮盖住Menu的二级菜单，如：

正常的情况应该是：

Uncaught TypeError: Cannot read property 'split' of null
saveJsZip @ index.js:69614

先赞一下 ant-motion 的模版，十分好用，目前希望支持响应式布局。

按照 ant-design 栅格的使用方式，可以用下面的方式来做响应式适配：

import { Row, Col } from 'antd';

ReactDOM.render(
  <Row>
    <Col xs={2} sm={4} md={6} lg={8}>Col</Col>
    <Col xs={20} sm={16} md={12} lg={8}>Col</Col>
    <Col xs={2} sm={4} md={6} lg={8}>Col</Col>
  </Row>
, mountNode);

而比如在模版的 Content2 和 Content5 中，不太清楚应该如何来做？

Content2: 多个文字段落
Content5: 多个文字段落+图片

是否可以给个简单的参考样例？

https://motion.ant.design/api/queue-anim

component 参数的类型文档中写的是string， 其实可以是ReactDom。

亲测 component={Row} 可用

新模块大概什么时候能开放呢？

export default class Logo extends React.Component {
  constructor(props) {
    super(props);
    this.path = `M3.5,175V19c0,0,1-8.75,8.25-11.5S26.5,8,26.5,8l54,53.25
      c0,0,7,8.25,14.5,0.75s51.5-52.25,51.5-52.25s9.75-7,18-2s7.75,11.5,7.75,11.5
      v104c0,0-0.5,15.75-15.25,15.75s-15.75-15-15.75-15V68.5c0,0-0.125-9.125-6-3.25
      s-36.25,36-36.25,36s-11.625,11.875-24-0.5S40.25,65.5,40.25,65.5
      s-5.75-5.25-5.75,2s0,107.25,0,107.25s-0.75,13.5-14.5,13.5S3.5,175,3.5,175z`;
    this.animation = {
      path: this.path,
      repeat: -1,
      duration: 5000,
      ease: 'linear'
    };
  }
  render() {
    return (
      <div style={{  height: 200, width: 200, margin: 'auto' ,background: "white"}}>
        <TweenOne
          animation={this.animation}
          style={{  width: 20, height: 20, transform: 'translate(-10px, -10px)', background:"blue" }}
          className="code-box-shape"
          paused={this.props.paused}
        />
        <svg width="200" height="200">
          <path d={this.path} fill="red" stroke="rgba(1, 155, 240, 0.2)"/>
        </svg>
      </div>
    )
  }
}

代码如上 但是小方块的运行轨迹跟svg的path轨迹不一样,而且小方块的运行会受到this.animation.duration的影响

• 用 https://github.com/benjycui/bisheng 重构。
• 主页样式布局
• 内页组件模块展示样式改版
• 首页完整模板选择
• 自由搭配模板
• 搭配的模块增加

对比数组是否相等的方法有bug

if (Array.isArray(obj1) && Array.isArray(obj2)) {
    for (var i = 0; i < obj1.length; i++) {
      var currentObj = obj1[i] ;
      var nextObj = obj2[i] ;
      for (var p in currentObj) {
        if (currentObj[p] !== nextObj[p]) {
                ...
        }
      }
    }
  }

若两个数组的长度不一样 就会报错。

我改成如下 就好了 请问会不会有影响

if (Array.isArray(obj1) && Array.isArray(obj2)) {
    for (var i = 0; i < obj1.length; i++) {
      var currentObj = obj1[i] || [];
      var nextObj = obj2[i] || [];
      for (var p in currentObj) {
        if (currentObj[p] !== nextObj[p]) {
          ...
        }
      }
    }
  }