当我使CSS切换动画出现或消失时，动画不起作用

我有问题。
我使用纯CSS切换按钮。这是它的代码：

.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: rgba(0,0.25);
border-radius: 20px;
transition: all 0.3s;
}
.switch::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius:50%;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
.checkbox:checked + .switch::after {
left : 20px;
}
.checkbox:checked + .switch {
background-color: #7983ff;
}
.checkbox {
display : none;
}


对于HTML部分

对于div，我想取消隐藏

当它不执行任何操作时，它可以完美工作。但是我想用它使它出现在ID为#slideMe的div中。
 所以我使用jQuery函数：

jQuery(document).ready(function() {
jQuery('#slideMe').show();
jQuery('#toggle').click(function() {
jQuery('#slideMe').slideToggle('slow');
return false;
});
});


当我单击开关时，内容被很好地隐藏和隐藏，但是切换开关的动画不再起作用。当然，如果删除我的jQuery，切换开关动画效果很好。

有什么想法吗？

非常感谢你们

删除函数中的return false;，这是不需要的。当您要停止执行函数或需要取消事件时（例如，在提交表单且验证失败时），请使用此语句。

您可以详细了解on this question。