我有一个元素，我想显示/隐藏基于布尔状态，但我也希望它做到这一点使用过渡。检查以下示例：
第一个
我有几个问题：它会出现在页面加载/刷新中，然后执行动画。另外，当它不可见时，div仍然存在。它只是将不透明度设置为零。因此，它存在与其他元素交互的潜在风险。例如，当您将光标悬停在按钮旁边的空间上时，光标会发生变化，因为它悬停在文本上，即使它是不可见的。
理想情况下，我希望它完全消失或从屏幕上移开。元素将有一个位置：在我的项目中修复。
处理这种情况的最佳实践是什么？请给我一个片段好吗？