Giter VIP home page Giter VIP logo

banner-anim's Introduction

rc-banner-anim


React BannerAnim Component

NPM version build status Test coverage node version npm download

Browser Support

IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

Development

npm install
npm start

Example

http://localhost:8012/examples/

online example: http://react-component.github.io/banner-anim/

install

rc-banner-anim

Usage

var BannerAnim = require('rc-banner-anim');
var React = require('react');
const { Element } = BannerAnim;
const BgElement = Element.BgElement;
React.render(<BannerAnim>
  <Element key="a">
    <BGElement key="bg" style={{ background: 'url(img)' }}/>
    <TweenOne key='0'>test text</TweenOne>
  </Element>
  <Element key="b">
    <BGElement key="bg" style={{ background: 'url(img)' }}/>
    <TweenOne key='0'>test text</TweenOne>
  </Element>
</BannerAnim>, container);

API

BannerAnim

`ref` control jump: <BannerAnim ref={(c) => { this.banner = c; }}/>

prev: this.banner.prev();

next: this.banner.next();

jump: this.banner.slickGoTo(number); number from 0;
name type default description
type string / array All animType Provide across, vertical, acrossOverlay, verticalOverlay, (gridBar, grid) => duration is a single block of animation time, video bg no use
duration number 450 Single switch time.
delay number 0 switch delay.
ease string easeInOutQuad easing.
initShow number 0 start show
arrow boolean true Arrow is children, this is null and void. else is default arrow
thumb boolean true ^
autoPlay boolean false auto play
autoPlaySpeed number 5000 auto play delay
autoPlayEffect boolean true auto play when mouse leave
onChange func - onChange(before or after, currentShowInt)
prefixCls string - user class
children react.component - Element(must), Arrow, Thumb
sync boolean false Element the children and Element the same time animation
dragPlay boolean true drag play next or prev
component string 'div' component tag

Element

children is TweenOne, animation type must from;

name type default description
leaveChildHide boolean false children leave switch animation. Replace the hideProps.
sync boolean false children and Element the same time animation
prefixCls string - user class
followParallax object null follow mouse anim
component string 'div' component tag
componentProps object null component is React.Element, component tag props, not add style

followParallax is object

name type default description
delay number null open followParallax delay
data array null content: { key: string, value: number, type: array or string, bgPosition: string }; key: children key; value: animation interval value, example: value is 20 => [left: -20, center: 0 , right: 20] ; type: style or x y, bgPosition: if type is backgroundPosition, this is bg default position, else is invalid.
ease string easeOutQuad animate ease. refer
minMove number null ease.easeInOutQuad(start, minMove, 1, end); The mouse to move once, the minimum point of moving graphics, a second to reach the position of the mouse.

Element.BgElement

name type default description
className string - className
scrollParallax object null { y: 100 }, from bottom to top of browser, element leave display area y is 100
videoResize boolean true children is video, video follow window resize
component string 'div' component tag
componentProps object null component is React.Element, component tag props, not add style

Arrow

name type default description
arrowType 'prev' | 'next' - arrow type
prefixCls string - user class
component string / React.Element div component tag
componentProps object null component is React.Element, component tag props, not add style

Thumb

name type default description
children React.Element - must
prefixCls string - user class
component string / React.Element div component tag
componentProps object null component is React.Element, component tag props, not add style

banner-anim's People

Contributors

afc163 avatar dependabot-support avatar jljsj33 avatar s0 avatar ycjcl868 avatar yeliex avatar yxwu25 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

banner-anim's Issues

当我设置背景图宽高后 为什么只显示图片 不显示文字呢 这是什么原因?

<BgElement
                                key="bg"
                                className="bg"
                                style={{
                                backgroundImage: 'url(http://127.0.0.1:3000/uploads/demo.jpg)',
                                backgroundSize: '100% 100%',
                                width: '100%',
                                height: '400px'
                                }}/>
                                <QueueAnim name="QueueAnim" style={{index: 9999}}>
                                    <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>

请教问题

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

BannerAnim 可以提供 currentShowInt 接口吗

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

Module not found: 'rc-queue-anim'

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

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

2

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

React 16 无法工作

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

实际效果:
image

0.3.0

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

banner-anim crashed when used with rc-tween-one

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

banner-anim crashed when using antd grid inside Element

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.