CSSwitch

CSSwitch - Small CSS library for switch-transitions.

Download

npm:

npm install csswitch --save

yarn:

yarn add csswitch

Usage

import CSSwitch from "csswitch";

const App = ({ state }) => {
  return (
    <CSSwitch as="ul" switchKey={state}>
      {state === 0 && <li className="item">2000</li>}
      {state === 1 && <li className="item">2001</li>}
      {state === 2 && <li className="item">2002</li>}
    </CSSwitch>
  )
}

.item {
  @include init {
    opacity: 0;
  }
  
  @include in {
    opacity: 1;
    transition: opacity .5s;
  }

  @include out {
    opacity: 0;
    transition: opacity .25s;
  }
}

I recommend using SASS mixins for shorter code

@mixin init {
  &[class$="init"] {
    @content;
  }
}

@mixin in {
  &[class$="enter"] {
    @content;
  }
}

@mixin out {
  &[class$="exit"] {
    @content;
  }
}

Classic CSS code without SASS

[class$="init"].item {
  opacity: 0;
}

[class$="enter"].item {
  opacity: 1;
  transition: opacity .5s;
}

[class$="exit"].item {
  opacity: 0;
  transition: opacity .25s;
}

Examples

Custom Cursor