.floatTOC {
	transition: 1s all ease;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	border: none;
	background: #f6f6f6;
	font-size: 0.8em;
	width: 10em;
	padding: 1.2em;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.floatTOC ul ul {
	margin: 0 0 0 0.75em;
}

.floatTOC:hover {
	width: auto;
	overflow: auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.floatTOC > * {
	transition: 1s all ease;
	opacity: 0.5;
}

.floatTOC:hover > * {
	opacity: 1;
}

.floatTOC .tocnumber {
	display: none;
}

.floatTOC a {
	color: #000;
}

.floatTOC .toctoggle {
	display: none;
}
.floatTOC {
	transition: 0.2s all ease;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	border: none;
	background: #f6f6f6;
	font-size: 0.8em;
	max-width: 10em;
	padding: 1.2em;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.floatTOC ul ul {
	margin: 0 0 0 0.75em;
}

.floatTOC:hover {
	max-width: 1000em;
	overflow: auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.floatTOC > * {
	transition: 1s all ease;
	opacity: 0.5;
}

.floatTOC:hover > * {
	opacity: 1;
}

.floatTOC .tocnumber {
	display: none;
}

.floatTOC a {
	color: #000;
}

.floatTOC .toctoggle {
	display: none;
}
Fix the transition between widths by using max-with
Fix the transition between widths by using max-with

http://n12v.com/css-transition-to-from-auto/
