Transition-duration nie działa z JS

Witam,
kiedy w JS dam

document.getElementsByClassName("produkt")[i].style.width = "auto";

to transition-duration nie działa i przejście nie jest płynne. (przy hover też nie)

CSS:

.produkt
{
	float: left;
	width: 180px;
	height: auto;
	cursor: pointer;
	font-size: 19px;
	min-width: 180px;
	margin-left: 20px;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	transition-duration: 1s;
	border: 2px #1d1d1d solid;
	padding: 10px 10px 10px 10px;
	box-shadow: 0 1px 15px #242424;
}

Jak mogę rozwiązać ten problem?

Animacja dla właściowości width nie zadziała, kiedy ma wartość auto.
Spróbuj może z max-width, czyli:

width: 100%;
max-width: 180px;
transition: max-width 1s linear;

wtedy w JS

document.getElementsByClassName('produkt')[i].style.maxWidth = '900px';

Jak widzisz ustawiłem transition: [transition-property] [transition-duration] [transition-timing-function], ponieważ chcemy ustawić efekt przejścia tylko dla właściwości max-width.
Wartość ustawiłem na 900px, bo założyłem, że taką szerokość może mieć element otaczający tego diva.
Jak ustawisz tą wartość na np. 9000px to wtedy animacja może sprawiać wrażenie szybciej wykonanej - dzieje się tak, ponieważ animacja trwa 1s dla szerokości 9000px, więc jeśli twój kontener ma maksymalną szerokość 900px to będzie się wydawało, że ta animacja trwała 100ms. Wypróbuj ten kod u siebie to zobaczysz i zrozumiesz o co mi chodzi.