Анимация типа jQuery.fadeIn() на основе CSS

fade-animation.scss

/** Анимация типа jQuery.fadeIn() на основе CSS.
 *
 * Применима только к абсолютно спозиционированным элементам.
 *
 * Элемент скрывается за счет отрицательного z-index,
 * для которого применяется своя easing-функция,
 * причем для основного состояния это step-end,
 * а для видимого - step-start,
 * чтобы z-index в обоих случаях оставался положительным
 * на всём протяжении анимации.
 *
 * Если у элемента анимируются другие свойства,
 * помимо z-index и opacity, их нужно сюда дописывать
 * отдельно, для чего потребуется дополнить
 * набор аргументов. В этом состоит недостаток
 * данного подхода. Но другого способа сделать
 * анимацию типа fade на чистом CSS нет.
 *
 * Применение (в самом простом случае):
 * - для стилей основного элемента - вызывать с аргументом false
 * - для стилей элемента в видимом состоянии - с аргументом true
 * - настроить переключение классов (скрытый и видимый) на javascript
 */

@mixin fade-animation($visible-state, $duration: 0.2s, $z-index: 1) {
	@if $visible-state == false { // Основное состояние
		z-index: -1;
		opacity: 0;
		transition-property: opacity, z-index;
		transition-timing-function: linear, step-end;
		transition-duration: $duration;
	}
	@else { // Видимое состояние
		z-index: $z-index;
		opacity: 1;
		transition-property: opacity, z-index;
		transition-timing-function: linear, step-start;
	}
}