scss notes

rotate-smooth-transition.jsx

// how to create a clockwise rotate animation with SwitchTransition and CSSTransition approach


// jsx
	<div className="rotating-icon">
				<SwitchTransition>
					<CSSTransition
						key={state ? 'faChevronDown' : 'faChevronUp'}
						addEndListener={(node, done) => node.addEventListener('transitionend', done, false)}
						classNames="rotate"
						timeout={125}
					>
						<FontAwesomeIcon icon={state ? faChevronDown : faChevronUp} onClick={handleClick} />
					</CSSTransition>
				</SwitchTransition>
	</div>

rotate-smooth-transition.scss

// how to create a clockwise rotate animation with SwitchTransition and CSSTransition approach

// scss:
.rotate-enter {
	transform: rotate(-90deg);
}
.rotate-exit {
	transform: rotate(0);
}
.rotate-enter-active {
	transform: rotate(0);
  transition: transform 300ms ease-out;
}
.rotate-exit-active {
	transform: rotate(90deg);
  transition: transform 300ms ease-in;
}

staggered-dropdown.scss

// staggered dropdown menu list item animation with nesting @for flow control selector  

@keyframes staggered-drop-down {
	0% {
		opacity: 0;
		transform: rotateX(-90deg);
	}
	50% {
		transform: rotateX(-20deg);
	}
	100% {
		opacity: 1;
		transform: rotateX(0deg);
	}
}

#id .class li {
	animation: staggered-drop-down 300ms ease-in-out;
	animation-fill-mode: both;
  
  // for the first 10 selected list items
	@for $i from 1 through 10 {
		&:nth-child(#{$i}) {
			animation-delay: 100ms * $i + 35ms;
		}
	}
}


Reference: 
Daniel, B.(2019, June 27). Different Approaches for Creating a Staggered Animation[Blog post]. Retrieved from https://css-tricks.com/different-approaches-for-creating-a-staggered-animation/