example.scss

@import '../sass-mixins/transition-height/index';
@import '../sass-mixins/transition-element-movement/index';
.sample {
	border: 2px solid black;
	background-color: #fff;
	width: 200px;
	height: 50px;
	line-height: 50px;
	margin: 20px auto;
	text-align: center;
	&.is-green {
		background-color: green;
		color: white;
	}
}

.demo {
	background-color: #d4d4d4;
	padding: 20px;
    border: 3px solid black;
    margin-bottom: -3px;
    min-height: 400px;
    box-sizing: border-box;
}

.transitions-are-enabled {

	// persist-class sample
	.sample-persist-class {
		transition: background-color 500ms ease-in-out, color 500ms ease-in-out;
	}

	// rdd sample
	.sample-add-remove.example-add-remove-enter {
		opacity: 0;
		transform: rotate(180deg);
		transition: transform 1000ms ease-in-out, opacity 1000ms ease-in-out;
	}

	.sample-add-remove.example-add-remove-enter-active {
		opacity: 1;
		transform: rotate(0);
	}

	// remove sample
	.sample-add-remove.example-add-remove-leave {
		opacity: 1;
		transform: 0;
		transition: transform 1000ms ease-in-out, opacity 1000ms ease-in-out
	}

	.sample-add-remove.example-add-remove-leave-active {
		opacity: 0;
		transform: rotate(180deg);
	}

	// height-on-added sample
	.sample-height-on-added {
		@include maxHeightOnAddedTransitions();
	}

	// move sample
	.sample-movable {
		@include transitionElementMovement("transition-motion", 500ms cubic-bezier(0.78, 0.28, 0.45, 1.64));
	}

	.sample-advanced {
		&.advanced-enter {
			transition: transform 400ms cubic-bezier(0,0,.64,1.38), opacity 500ms ease-in-out;
			opacity: 0;
			transform: scale3d(0.7, 0.7, 1) translate3d(0, -150%, 0);
		}
		&.advanced-enter-active {
			opacity: 1;
			transform: none;
		}
		&.advanced-leave {
			transition: opacity 500ms ease, transform 500ms ease;
			opacity: 1;
			transform: none;
		}
		&.advanced-leave-active {
			opacity: 0;
			transform: scale3d(1.5, 1.5, 1) translate3d(0, 150%, 0);
		}
	}

	.sample-2-advanced {
		&.left-enter {
			transition: transform 400ms cubic-bezier(0,0,.64,1.38), opacity 500ms ease-in-out;
			opacity: 0;
			transform: scale3d(0.7, 0.7, 1) translate3d(100%, 0, 0);
		}
		&.left-enter-active {
			opacity: 1;
			transform: none;
		}
		&.right-enter {
			transition: transform 400ms cubic-bezier(0,0,.64,1.38), opacity 500ms ease-in-out;
			opacity: 0;
			transform: scale3d(0.7, 0.7, 1) translate3d(-100%, 0, 0);
		}
		&.right-enter-active {
			opacity: 1;
			transform: none;
		}
		&.left-leave {
			transition: opacity 500ms ease, transform 500ms ease;
			opacity: 1;
			transform: none;
		}
		&.left-leave-active {
			opacity: 0;
			transform: scale3d(0.5, 0.5, 1) translate3d(100%, 0, 0);
		}
		&.right-leave {
			transition: opacity 500ms ease, transform 500ms ease;
			opacity: 1;
			transform: none;
		}
		&.right-leave-active {
			opacity: 0;
			transform: scale3d(0.5, 0.5, 1) translate3d(-100%, 0, 0);
		}
	}
}

// height toggle sample
.sample-height {
	@include maxHeightTransitions();
}

// additional styles for move demo
.sample-movable {
	position: relative;
	border: 2px solid black;
	line-height: 50px;
	margin: 20px auto;
	text-align: center;

	// via a redux state change, this class is added to
	// the node when its position should change. It is this
	// positional/size change that ends up getting animated
	&.moved {
		top: -100px;
		right: 20px;
		width: 300px;
		height: 150px;
	}
}

.advanced-demo {
	min-height: 500px;
	.sample {
		color: #FFF;
	}
	#advanced-1, #advanced-2-1 {
		background-color: #034f7d;
	}
	#advanced-2, #advanced-2-2 {
		background-color: #8e2222;
	}
	#advanced-3, #advanced-2-3 {
		background-color: #51179a;
	}
	#advanced-4, #advanced-2-4 {
		background-color: #10754c;
	}
}