Javascript 如何使CSS淡出但HTML崩溃

我有一个元素，它的css样式由javascript控制，只需添加/删除类

例如，我有一个hide类，当我想要隐藏某个元素时，我将该类应用于该元素，当该元素被隐藏时，页面将重新构造，就好像内容从未出现过一样。这太棒了

我现在想让物品先淡出，然后折叠，但我迷路了

我的努力是

document.getElementByIdclicky.addEventListenerclick，changeMe； 函数变换{ var ele=document.getElementByIditem； ele.className=hide； } 单击{光标：指针；} .hide{ 动画：淡出1s； -webkit动画：淡出1s；/*铬、狩猎、歌剧*/ 动画填充模式：正向； -webkit动画填充模式：正向； } /*铬、狩猎、歌剧*/ @-webkit关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } /*标准语法*/ @关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } 点击我 我是雷梅因！ 我应该去拜拜，但也崩溃，以便网页可以重新组织时，我解散！！！！！ 我应该永远呆在这里，但当上面的一行消失时，我会身体向上移动 很简单，你可以使用最大高度：0px。通过使用此选项，您的高度将设置为0，并且看起来该元素不存在

document.getElementById("clicky").addEventListener("click", changeMe);

function changeMe() {
    var ele = document.getElementById("item");   
    ele.className= "hide";
    setTimeout(function() { ele.style["max-height"] = '0px'; }, 1000);
}

JSFIddle：

希望这对您有所帮助

很简单，您可以使用最大高度：0px。通过使用此选项，您的高度将设置为0，并且看起来该元素不存在

document.getElementById("clicky").addEventListener("click", changeMe);

function changeMe() {
    var ele = document.getElementById("item");   
    ele.className= "hide";
    setTimeout(function() { ele.style["max-height"] = '0px'; }, 1000);
}

JSFIddle：

---

希望这对您有所帮助

我只会在淡出中设置最大高度值的动画，例如

---

.

我只会在淡出中设置最大高度值的动画，例如

---

.

动画完成后，我会将显示设置为“无”，而不是搞乱高度

document.getElementByIdclicky.addEventListenerclick，changeMe； 函数变换{ var ele=document.getElementByIditem； ele.className=hide； setTimeoutfunction{ ele.style.display='none'； }, 1000; } 单击{光标：指针；} .hide{ 动画：淡出1s； -webkit动画：淡出1s；/*铬、狩猎、歌剧*/ 动画填充模式：正向； -webkit动画填充模式：正向； } /*铬、狩猎、歌剧*/ @-webkit关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } /*标准语法*/ @关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } 点击我 我是雷梅因！ 我应该去拜拜，但也崩溃，以便网页可以重新组织时，我解散！！！！！

---

我应该永远呆在这里，但当上面的一行消失时，我会身体向上移动 在动画完成后，我只会将显示设置为“无”，而不是搞乱高度

document.getElementByIdclicky.addEventListenerclick，changeMe； 函数变换{ var ele=document.getElementByIditem； ele.className=hide； setTimeoutfunction{ ele.style.display='none'； }, 1000; } 单击{光标：指针；} .hide{ 动画：淡出1s； -webkit动画：淡出1s；/*铬、狩猎、歌剧*/ 动画填充模式：正向； -webkit动画填充模式：正向； } /*铬、狩猎、歌剧*/ @-webkit关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } /*标准语法*/ @关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } 点击我 我是雷梅因！ 我应该去拜拜，但也崩溃，以便网页可以重新组织时，我解散！！！！！

---

我应该永远呆在这里，但当上面的一行消失时，我会身体向上移动 您可以使用setTimeout并为其提供另一个css类：

document.getElementByIdclicky.addEventListenerclick，changeMe； 函数变换{ var ele=document.getElementByIditem； ele.className=hide； setTimeoutfunction{ ele.className=禁用； },1000; } 单击{光标：指针；} .禁用{ 显示：无！重要； } .hide{ 动画：淡出1s； -webkit动画：淡出1s；/*铬、狩猎、歌剧*/ 动画填充模式：正向； -webkit动画填充模式：正向； } /*铬、狩猎、歌剧*/ @-webkit关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } /*标准语法*/ @关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } 点击我 我是雷梅因！ 我应该 再见，但也会崩溃，这样当我解散时，页面可以重新组织！！！！！

---

我应该永远呆在这里，但当上面的一行消失时，我会身体向上移动 您可以使用setTimeout并为其提供另一个css类：

document.getElementByIdclicky.addEventListenerclick，changeMe； 函数变换{ var ele=document.getElementByIditem； ele.className=hide； setTimeoutfunction{ ele.className=禁用； },1000; } 单击{光标：指针；} .禁用{ 显示：无！重要； } .hide{ 动画：淡出1s； -webkit动画：淡出1s；/*铬、狩猎、歌剧*/ 动画填充模式：正向； -webkit动画填充模式：正向； } /*铬、狩猎、歌剧*/ @-webkit关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } /*标准语法*/ @关键帧淡出{ 从{ 显示：块； 能见度：可见； 不透明度：1；} 到{ 显示：无； 可见性：隐藏； 不透明度：0；} } 点击我 我是雷梅因！ 我应该去拜拜，但也崩溃，以便网页可以重新组织时，我解散！！！！！

---

我应该永远呆在这里，但当上面的一行消失时，我会身体向上移动！设置高度：0；？这不管用吗？@Ruddy，不，很遗憾这没有什么区别。你有一个明确的动画时间，所以你可以说像setTimeoutfunction{ele.style.display='none'；}，1000@MyDaftQuestions确定吗？此演示使用的是Autoprefixer。@MyDaftQuestions淡出和向上滑动是jQuery中的标准化函数，更易于使用。另外，您可以等待动画完成，然后继续使用其他动画。设置高度：0；？这不管用吗？@Ruddy，不，很遗憾这没有什么区别。你有一个明确的动画时间，所以你可以说像setTimeoutfunction{ele.style.display='none'；}，1000@MyDaftQuestions确定吗？此演示使用的是Autoprefixer。@MyDaftQuestions淡出和向上滑动是jQuery中的标准化函数，更易于使用。另外，您可以等待动画完成，然后继续使用不同的动画。我对css没有太多的了解，但如果可以这样做会更好+1这并不完全符合OP的要求，但我在这里挑剔：。它同时执行不透明度和高度。我对css没有太多的了解，但如果可以这样做会更好+1这并不完全是OP要求的，但我在这里挑剔：。它同时执行不透明度和高度。