Javascript 第一次tweellite旋转不'；我不明白

我建立了一些简单的。如果单击它们，它们将翻转并显示另一面

我目前面临的问题是每次重新加载后，第一次翻转都不会渲染（Windows 10、Google Chrome 67）。它显示另一面，但不执行TweenLite翻转“动画”。这只会在第一次翻转时发生，选择哪个六边形无关紧要。我希望有人能帮我

我将在此处发布我的代码的精简版本，这样您就不必转到CodePen：

$（文档）.ready（函数（）{
“严格使用”；
$（“.hexFront”）。单击（函数（）{
$（this.hide（）；
TweenLite.to（$（本），1{
旋转度：180，
ease:Power4.easeOut
});
$（本）
.next（）
.show（）；
TweenLite.to（$（this.next（），1{
旋转度：0，
ease:Power4.easeOut
});
});
$（“.hexBack”）。单击（函数（）{
$（本）
.prev（）
.show（）；
TweenLite.to（$（this.prev（），1{
旋转度：0，
ease:Power4.easeOut
});
$（this.hide（）；
TweenLite.to（$（本），1{
旋转度：180，
ease:Power4.easeOut
});
});
});
正文{
背景色：#1c1c；
}
#六边形网格{
宽度：90%；
保证金：0自动；
垫底：5.5%；
溢出：隐藏；
列表样式类型：无；
}
海克斯先生{
位置：相对位置；
可见性：隐藏；
外形：1px实心透明；
宽度：25%；
}
.hex：：之后{
内容：“；
显示：块；
垫底：86.602%；
}
hexFront先生，
hexBack先生{
前景：800；
transformstyle:preserve-3d；
旋转度：-180；
背面可见性：隐藏；
}
hexBack先生{
显示：无；
}
贺信先生{
位置：绝对位置；
宽度：96%；
垫底：110.851%；
利润率：0.2%；
溢出：隐藏；
可见性：隐藏；
外形：1px实心透明；
变换：旋转3D（0,0,1，-60度）倾斜（30度）；
}
赫森内尔先生{
位置：绝对位置；
能见度：可见；
外形：1px实心透明；
背景色：#fff；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
溢出：隐藏；
变换：倾斜（-30度）旋转3d（0,0,1,60度）；
}
.hexInner img{
左-100%；
右图：-100%；
宽度：自动；
身高：100%；
保证金：0自动；
变换：旋转3d（0,0,0,0度）；
不透明度：0.75；
滤镜：灰度（100%）；
过渡期：4s；
}
.HEXINDER img：悬停{
不透明度：1；
滤镜：灰度（0%）；
转换：0s；
}
.内六角{
颜色：黑色；
文本对齐：居中；
文本转换：大写；
字体系列：无衬线；
字体大小：300；
字体大小：2vw；
保证金：0；
}



背面


在单击之前调用TweenLite函数，为
转换添加默认值，以避免出现问题：


$（文档）.ready（函数（）{
“严格使用”；
/*加上这个*/
TweenLite.to（$（“.hexFront”），1，{rotationY:0}）；
TweenLite.to（$（“.hexBack”），1，{rotationY:180}）；
/**/
$（“.hexFront”）。单击（函数（）{
$（this.hide（）；
TweenLite.to（$（this），1，{rotationY:180，ease:Power4.easeOut}）；
$（本）
.next（）
.show（）；
to（$（this.next（），1，{rotationY:0，ease:Power4.easeOut}）；
});
$（“.hexBack”）。单击（函数（）{
$（本）
.prev（）
.show（）；
to（$（this.prev（），1，{rotationY:0，ease:Power4.easeOut}）；
$（this.hide（）；
TweenLite.to（$（this），1，{rotationY:180，ease:Power4.easeOut}）；
});
});
正文{
背景色：#1c1c；
}
#六边形网格{
宽度：90%；
保证金：0自动；
垫底：5.5%；
溢出：隐藏；
列表样式类型：无；
}
海克斯先生{
位置：相对位置；
可见性：隐藏；
外形：1px实心透明；
宽度：25%；
}
.hex：：之后{
内容：“；
显示：块；
垫底：86.602%；
}
hexFront先生，
hexBack先生{
前景：800；
transformstyle:preserve-3d；
旋转度：-180；
背面可见性：隐藏；
}
hexBack先生{
显示：无；
}
贺信先生{
位置：绝对位置；
宽度：96%；
垫底：110.851%；
利润率：0.2%；
溢出：隐藏；
可见性：隐藏；
外形：1px实心透明；
变换：旋转3D（0,0,1，-60度）倾斜（30度）；
}
赫森内尔先生{
位置：绝对位置；
能见度：可见；
外形：1px实心透明；
背景色：#fff；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
溢出：隐藏；
变换：倾斜（-30度）旋转3d（0,0,1,60度）；
}
.hexInner img{
左-100%；
右图：-100%；
宽度：自动；
身高：100%；
保证金：0自动；
变换：旋转3d（0,0,0,0度）；
不透明度：0.75；
滤镜：灰度（100%）；
过渡期：4s；
}
.HEXINDER img：悬停{
不透明度：1；
滤镜：灰度（0%）；
转换：0s；
}
.内六角{
颜色：黑色；
文本对齐：居中；
文本转换：大写；
字体系列：无衬线；
字体大小：300；
字体大小：2vw；
保证金：0；
}



背面


我觉得你的代码太复杂了。
您完全可以避免使用TweenLite：


$（文档）.ready（函数（）{
“严格使用”；
$（“.hexFront.hexBack”）。单击（函数（）{
$（this.css（{transform:'rotateY（180deg）”，不透明度：0}）
.next（）.css（{transform:'rotateY（0deg）”，不透明度：1}）.end（）
.prev（）.css（{transform:'rotateY（0deg）”，不透明度：1}）；
});
});
正文{
背景色：#1c1c；
}
#六边形网格{
宽度：90%；
保证金：0自动；
垫底：5.5%；
溢出：隐藏；
列表样式类型：无；
}
海克斯先生{
位置：相对位置；
可见性：隐藏；
外形：1px实心透明；
宽度：25%；
}
.hex：：之后