Simple todo app using CSS and style Animation in ReactJS with minimal libraries. Demonstrates the use of Animate container components to manage CSS transition state.
Props needed are "hide: true || false". CSS class needs to be configured with "show" class.
.swing { perspective: 100px; }
.swing li { opacity: 0; transform: rotateY(-90deg); transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76); }
.swing li.show { opacity: 1; line-height: 1.5rem; transform: none; transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76); }
Props needed are "hide: true || false", "in" style, "out" style.
This component needs props passed with the "in" style and the "out" style. The element to be animated also needs to be contained in an initial Animation container to support perspective animation.
.swing { perspective: 100px; }
out = { opacity: 0; transform: rotateY(-90deg); transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76); }
in = { opacity: 1; line-height: 1.5rem; transform: none; transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76); }