react-component / banner-anim Goto Github PK

如题，将 BannerAnim 的type设置为gridBar或grid时，想达到播放动画时“高度自适应”的效果。
.banner-user, .banner-anim{
// height: 600px; 这里只有将height设置为px，才会生效。但无法自适应高度。
height: 100%; //将高度设置为百分比时，无效。
}

banner项数量大于等于3, 且设置了背景, 在拖动切换的过程中, 后面的banner项背景会覆盖掉banner项
如demo:
http://react-component.github.io/banner-anim/examples/change.html

在切换的过程中, 第一项和第三项的z-index是相同的, 所以后面的banner项的会覆盖前面.

如题，需求场景是：页面切换的方式，除了 autoPlay 切换，通过pre，next箭头切换，也可以通过 点击页面对应的icon切换，此时需要 currentShowInt 接口，来控制当前显示的是哪个页面。

如题 banner怎么更改autoplay 时间 目前的api有点少

<BannerAnim
prefixCls="banner-user"
autoPlay
dragPlay={false}
onChange={this.onChange}

麻烦看看，autoPlayEffect 设置为false，鼠标移入移出会自动播放，不会停止。效果好像是有的，但是提示没有这个参数

想问一下这行的代码中的${gridWidth + 1}px是属于什么语法？（看着不是jQuery也不像EL表达式。。 😅 ）

There is a bug at a method onTouchEnd => Cannot read property 'clientX' of undefined

There are two elements under BannerAnim. One used antd Grid (Row, Column) , & rc-tween-one animation inside Antd Title, another is empty. Switching element several times, the page will report an error and crash

index.js:1375 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Element.
in Element (at Home.jsx:38)
in div (created by BannerAnim)
in BannerAnim (at Home.jsx:37)
in div (at Home.jsx:33)
in div (at Home.jsx:31)
in Home (created by Context.Consumer)
in Route (at App.js:51)
in App (at src/index.js:20)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:19)
in Provider (at src/index.js:18)

Here is the example https://codesandbox.io/embed/dazzling-robinson-6q1wp
There are two elements under BannerAnim. One used rc-tween-one animation, another is empty. Switching element several times, the page will report an error and crash

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Element.
in Element (created by App)
in div (created by BannerAnim)
in BannerAnim (created by App)
in App

这是要搞死slider revolution那些库的节奏呀。

之前用rc-slider，功能太简单。所以自己写了一个。今天看到这个，真心不错，就忍不住来赞一下了。

react版本: 16.3.2
浏览器: Chrome 68.0.3418.2

完整代码:
直接粘贴的 示例代码

import React from 'react'

import BannerAnim, { Element } from 'rc-banner-anim'
import TweenOne from 'rc-tween-one'
import QueueAnim from 'rc-queue-anim'

import 'rc-banner-anim/assets/index.css'

const BgElement = Element.BgElement;

class Demo extends React.Component {
  render () {
    return (
      <BannerAnim prefixCls="banner-user">
        <Element key="aaa"
          prefixCls="banner-user-elem"
        >
          <BgElement
            key="bg"
            className="bg"
            style={{
              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg)',
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }}
          />
          <QueueAnim name="QueueAnim">
            <h1 key="h1">Ant Motion Demo</h1>
            <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
          </QueueAnim>
          <TweenOne animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }} name="TweenOne1">
            Ant Motion Demo.Ant Motion Demo
          </TweenOne>
        </Element>
        <Element key="bbb"
          prefixCls="banner-user-elem"
        >
          <BgElement
            key="bg"
            className="bg"
            style={{
              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)',
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }}
          />
          <QueueAnim name="QueueAnim">
            <h1 key="h1">Ant Motion Demo</h1>
            <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
          </QueueAnim>
          <TweenOne animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }} name="TweenOne2">
            Ant Motion Demo.Ant Motion Demo
          </TweenOne>
        </Element>
      </BannerAnim>
    );
  }
}

export default Demo

实际效果:

报错地址为：
https://github.com/react-component/banner-anim/blob/master/src/BannerAnim.jsx#L102

常规情况下，拿到数组之后会直接

 var children  = data.map((val,key)=>{<element key={key} />});

在这种情况下直接判断!item.key是不正确的。

目前的workaroud是将key变为字符串。这样才正常。

Can l Show more than one image? how to Setting.
Simple Like:

幻灯片不能按预期的效果显示
重现地址：在IE9下访问 http://react-component.github.io/banner-anim/examples/autoplay.html
操作说明：点击按钮来回切换图片，会出现图片不显示或错位等现象
操作系统：win7旗舰版
浏览器：IE9

dva项目,通过命令 npm install rc-banner-anim --save 安装之后，
在js中通过导入 rc-banner-anim 报错：

Uncaught Error: Cannot find module "rc-queue-anim" ...

但是使用 antd-mobile 等模块却没问题，是需要配置什么东西吗？谢谢

• 滚动下沉
• 元素跟随鼠标移动
  ....

• Element 里的 bg 提取出来为 ElementBg
• Uncaught TypeError: Cannot read property 'currentX' of undefined

比如 Autoplay 时间是五秒，我在第四秒点击切换下一张，马上又触发 autoplay 的切换，又切换到了下一张