ScrollAnim 的 OverPack和Link标签冲突

[503710847]

问题代码 链接部分代码 <div>

<Link to={"content_2_0"} toHash={false}>关于1 <OverPack replay playScale={[0.3, 0.1]} {...props}

<Link to={"content_2_0"} toHash={false}>关于2 </OverPack>

</div>

链接目标代码：

  <Content1 id="content_2_0" key="content_2_0" isMobile={this.state.isMobile}/>,

问题： 点击【关于1】 动效正常，能完整显示 Content1 点击【关于2】只到了 Content1 的顶部， 去掉 playScale={[0.3, 0.1]} 点击 【关于2】到 Content1 中间

[jljsj33]

能提供完整代码吗？这样看不出什么问题的。。。

[jljsj33]

是不是这个问题？？？https://github.com/react-component/scroll-anim/issues/38

[503710847]

您好，和您刚才发的网址的不太一样，完整代码我怎么发给您

[jljsj33]

直接贴上来啊

[503710847]

请看关于1是正常的，关于2点击显示不正常，请帮忙指导下，辛苦！

import React, {PropTypes} from 'react'; import {Button, Icon,Modal} from 'antd'; import QueueAnim from 'rc-queue-anim'; import TweenOne from 'rc-tween-one'; import logoCenter from '../../assets/img/logo48.png' import ScrollAnim from 'rc-scroll-anim';

const Link = ScrollAnim.Link; const OverPack = ScrollAnim.OverPack;

class Content extends React.Component { render() { const props = {...this.props}; delete props.isMobile; return ( <div> <div style={{"textAlign":"center","background":"#ffffff"}}> <h1> <Link to={"content_2_0"} toHash={false}

关于1 </Link> </h1> </div>

  <OverPack
    replay
    playScale={[0.3, 0.1]}
   {...props}
  >
    <QueueAnim
      type={['bottom', 'top']}
      delay={200}
      className={`${props.className}-wrapper`}
      key="text"
      id={`${props.id}-wrapper`}
    >
      <span
        className="title"
        key="title"
        id={`${props.id}-title`}
      >
        <img width="60%" src={logoCenter}/>
      </span>
      <p
        key="content"
        id={`${props.id}-content`}
      >
        将一切化繁为简，打造智能的健身健身服务系统
      </p>
      <h1>
        <Link style={{"color":"#fff"}}
          to={"content_2_0"}
          toHash={false}
        >
          关于2
        </Link>
      </h1>

      <Button type="ghost" key="button" id={`${props.id}-button`} onClick={()=>{
      // props.webRouter.push("/#content_2_0");
      }}  >
      在线咨询
      </Button>

    </QueueAnim>

    <TweenOne
      animation={{y: '-=20', yoyo: true, repeat: -1, duration: 1000}}
      className={`${props.className}-icon`}
      key="icon"
    >
      <Icon type="down"/>
    </TweenOne>
  </OverPack>
  </div>
);

} }

Content.propTypes = { className: PropTypes.string, };

Content.defaultProps = { className: 'banner0', };

export default Content;

[503710847]

您好，我已经上传git上 git网址：https://github.com/503710847/ant-motion-dva-cli-example-2.0 位置：https://github.com/503710847/ant-motion-dva-cli-example-2.0/blob/master/src/routes/Home/Content0.jsx

[jljsj33]

<h1 key="link">
  <Link
    style={{ color: '#fff' }}
    to="content_2_0"
    toHash={false}
  >
    关于2
  </Link>
</h1>;

加 key, 可能是 OverPack 里将不带 key 的元素直接移除了，，所以导致动画也被直接移除，，加下 key 会在出场结束后再去移除，出场的动画时间跟滚动的时间相同就没有问题。。。

[jljsj33]

还有 Link 是有个 component 的,,可以这么写

<Link
  style={{ color: '#fff' }}
  to="content_2_0"
  toHash={false}
  component="h1"
  key="h1"
>
  关于2
</Link> 

[jljsj33]

模板这块用 landing 吧，，那是最新的规范。。。。

[503710847]

嗯呐 感谢