[IE] css transition width calc애니메이션안들어감

width에 calc를 사용하면 ie에서는 transition이 안먹는다.

 

See the Pen ie transition width not working by EuraKo (@eurako) on CodePen.

 

 

 

위에처럼하면 딱딱 끊겨나온다.

원인은 width에 calc가 들어가서 그런것이다

 

해결방법은

전체적으로 잡고있는 .sub_container에 width를 넉넉하게 주고 max-width:calc();로 잡아야한다.

 

성공코드

See the Pen ie transition width not working(success) by EuraKo (@eurako) on CodePen.

수정 전

.sub_container {
	width: calc(100% + 300px);
}

수정 후

.sub_container {
    width: 140%;
    max-width: calc(100% + 300px);
}