Jquery 将不透明度从0设置为1，然后设置为背面

当类被移除时，我尝试将不透明度（和转换值）从0设置为1，然后再返回到0。不透明度的动画设置为1，但不会设置回0。相反，它只是跳跃。看看这支笔，看看我的问题在起作用。我错过了什么

代码：

嘿，看看这把小提琴。 您的转换需要在所有上，而不仅仅是在转换上 这：

而不是：

transition: transform 0.5s ease-in-out

因为您也正在设置不透明度的动画

我还切换了你的jQuery功能。现在更简单了

$（“body”）。在（“单击”，函数（）{
$（“cp”）.toggleClass（“cp活动”）；
});
#cp.cp-active{
变换：translateY（50px）；
不透明度：1；
}
#cp{
背景色：红色；
位置：相对位置；
宽度：85%；
保证金：自动；
盒影：无；
边框颜色：黑色；
不透明度：0；
-webkit过渡：所有0.5s易入易出；
过渡：所有0.5s缓进缓出；
变换：translateY（0px）；
高度：100px；
宽度：100px；
}

你好
嘿，看看这把小提琴。
您的转换需要在所有上，而不仅仅是在转换上
这：

而不是：

transition: transform 0.5s ease-in-out

因为您也正在设置不透明度的动画

我还切换了你的jQuery功能。现在更简单了


$（“body”）。在（“单击”，函数（）{
$（“cp”）.toggleClass（“cp活动”）；
});
#cp.cp-active{
变换：translateY（50px）；
不透明度：1；
}
#cp{
背景色：红色；
位置：相对位置；
宽度：85%；
保证金：自动；
盒影：无；
边框颜色：黑色；
不透明度：0；
-webkit过渡：所有0.5s易入易出；
过渡：所有0.5s缓进缓出；
变换：translateY（0px）；
高度：100px；
宽度：100px；
}

您好
上面的Traver解决方案非常好。这是另一个使用JQ的样式（除了常规的cp样式外，没有任何其他css）


$（“body”）。在（“单击”，函数（）{
if（$（“#cp”）.hasClass（“isVisible”））{
$（“#cp”）。设置动画({
'顶部'：'-50'，
“不透明度”：“0”
}，500）。removeClass（“isVisible”）
}否则{
$（“#cp”）。设置动画({
“顶部”：“0”，
“不透明度”：“1”
}，500）。addClass（“isVisible”）
}
});
正文{
高度：100vh；
}
#cp{
背景色：红色；
位置：相对位置；
顶部：-50px；
宽度：85%；
保证金：自动；
盒影：无；
边框颜色：黑色；
z指数：1；
-webkit转换：-webkit转换0.5s易入易出；
不透明度：0；
高度：100px；
宽度：100px；
}
上面的Traver解决方案非常好。这是另一个使用JQ的样式（除了常规的cp样式外，没有任何其他css）


$（“body”）。在（“单击”，函数（）{
if（$（“#cp”）.hasClass（“isVisible”））{
$（“#cp”）。设置动画({
'顶部'：'-50'，
“不透明度”：“0”
}，500）。removeClass（“isVisible”）
}否则{
$（“#cp”）。设置动画({
“顶部”：“0”，
“不透明度”：“1”
}，500）。addClass（“isVisible”）
}
});
正文{
高度：100vh；
}
#cp{
背景色：红色；
位置：相对位置；
顶部：-50px；
宽度：85%；
保证金：自动；
盒影：无；
边框颜色：黑色；
z指数：1；
-webkit转换：-webkit转换0.5s易入易出；
不透明度：0；
高度：100px；
宽度：100px；
}

将您的
转换添加到
.cp-active
您的代码仅与chrome safari兼容。将您的
转换添加到
.cp-active
您的代码仅与chrome safari兼容。
transition: transform 0.5s ease-in-out