body当中transition设置？

/*body{
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}*/
body.active{
	transform: translate3d(150px,0,0);
	-webkit-transform: translate3d(150px,0,0);
	-moz-transform: translate3d(150px,0,0);
	-ms-transform: translate3d(150px,0,0);
	-o-transform: translate3d(150px,0,0);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.header,.footer{position: fixed;left: 0;right: 0;text-align: center;height: 44px;line-height: 44px;z-index: 1;}
.header{border-bottom: 1px solid #e73068;top:0;}
.footer{border-top: 1px solid #e73068;bottom: 0;}
.header .btn-slide-bar{width: 44px;height: 44px;float: left;cursor: pointer;line-height: 2.8;}
.header .btn-slide-bar::before{content: "";width: 20px;height: 2px;background-color: #999;display: inline-block;box-shadow: 0 7px 0 #999, 0 -7px 0 #999;}
.wraper-page{position: absolute;top:44px;right: 0;bottom: 44px;left: 0;overflow: hidden;}
.slide-bar{position: absolute;top: 0px;bottom: 0px;background-color: #333;width: 150px;left: 0;z-index: 2;
	transform: translate3d(-150px,0,0);
	-webkit-transform: translate3d(-150px,0,0);
	-moz-transform: translate3d(-150px,0,0);
	-ms-transform: translate3d(-150px,0,0);
	-o-transform: translate3d(-150px,0,0);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.slide-bar li{padding-left: 10px;height: 40px;line-height: 40px;text-align: left;color: #fff;border-bottom: 1px solid #222;}

为什么body当中的transition注释之后，左侧菜单收回去时，没有all 0.2s ease-in-out效果，而是瞬间就收回了？