vdux-css-transition
CSSTransition component for adding classes to an element while it is transitioning
Last updated 5 years ago by ashaffer88 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vdux-css-transition 
SYNC missed versions from official npm registry.

css-transition

js-standard-style

CSSTransition component for adding classes to an element while it is transitioning

Installation

$ npm install vdux-css-transition

Usage

Use this component to apply classes to your nodes when they are being added/removed from the DOM. It works like this:

function render () {
  return (
    <CSSTransition timeout={500}>
      <Tooltip />
    </CSSTransition>
  )
}

Each child of <CSSTransition/> will have the following classes added to it:

  • enter - Immediately on creation
  • enter-active - On the next tick after the enter class is added
  • leave - When the component begins leaving
  • leave-active - On th enext tick after the leave class is added

API - props

  • timeout - (Object|Number). If you specify a number, it'll be used as both the enter and leave timeout lengths in milliseconds. You may alternatively passn an object with enter and leave keys to specify them independently.

Fade example (using jss-simple for css)

import css from 'jss-simple'

function render () {
  return (
    <CSSTransition timeout={150}>
      <div class={fade}>I'm fading in</div>
    </CSSTransition>
  )
}

const {fade} = css({
  fade: {
    '&.enter': {
      opacity: 0,
      '&.enter-active': {
        transition: 'opacity .15s linear',
        opacity: 1
      },
    },
    '&.leave': {
      opacity: 1,
      '&.leave-active': {
        opacity: 0,
        transition: 'opacity .15s linear'
      }
    }
  }
})

License

MIT

Current Tags

  • 1.2.1                                ...           latest (5 years ago)

6 Versions

  • 1.2.1                                ...           5 years ago
  • 1.2.0                                ...           5 years ago
  • 1.1.1                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 1
Dependencies (7)
Dev Dependencies (15)

Copyright 2014 - 2016 © taobao.org |