Javascript 转换不适用于translate3d

我有以下代码。当我点击切换按钮时，推包应该在1秒内向右滑动。但是过渡属性似乎不起作用

$（'.btn'）。单击（（）=>{
$（'body'）.toggleClass（'showNav'））
返回错误
})

html，正文{
保证金：0；
填充：0；
}
.网站包装{
宽度：100%；
身高：100%；
溢出：隐藏；
}
导航{
位置：固定；
排名：0；
左：0；
宽度：300px；
身高：100%；
}
h1{
保证金：0；
}
.推包{
背景：#fff；
宽度：100vw；
高度：100vh；
转换：转换3d-3s-0；
变换：translate3d（0,0,0）；
}
.showNav.push wrap{
变换：translate3d（300px，0，0）；
}

导航1
导航2
导航3
导航4

你好
切换

添加

过渡持续时间：1s到这个css

.showNav .push-wrap {
  transform: translate3d(300px, 0, 0);
  transition-duration: 1s;
}


$（'.btn'）。单击（（）=>{
$（'body'）.toggleClass（'showNav'））
返回错误
})
html，正文{
保证金：0；
填充：0；
}
.网站包装{
宽度：100%；
身高：100%；
溢出：隐藏；
}
导航{
位置：固定；
排名：0；
左：0；
宽度：300px；
身高：100%；
}
h1{
保证金：0；
}
.推包{
背景：#fff；
宽度：100vw；
高度：100vh；
变换：translate3d（0,0,0）；
}
.showNav.push wrap{
变换：translate3d（300px，0，0）；
过渡时间：1s；
}


导航1
导航2
导航3
导航4

你好
切换