每次在动画之后完全移除元素。 - 仅使用 CSS

Question

查询看起来多么简单，几个小时以来一直让我感到困惑，现在是 -

https://jsfiddle.net/230cLpnd/1/

在上面的 jsFiddle 中，我试图在动画完成后删除元素 [display:none;]。并在需要显示时反转。但是由于使用了display: none;，过渡也没有应用。

如何在每次动画完成时完全删除元素。

https://jsfiddle.net/230cLpnd，这里，没有使用显示 none，过渡发生了，但是元素没有完全隐藏，即使在 width: 0%;

编辑：不考虑调整高度。它由外部源设置。

编辑2：与第二个fiddle一样，动画是向右滑动隐藏内容，向左滑动显示内容。

提前致谢！！

Answer 1

您可以将 height 设置为 0，而不是将 display 设置为 none，正如您所发现的那样，它是不可转换的。使用各种 transition 属性，您可以防止 height 实际过渡，从而达到您想要的效果。

我还在 opacity 上添加了一个过渡，让您看起来更流畅一些，但这是个人品味的问题。

而且，为了节省您必须清除浮动元素的额外标记，我在容器中包含了一个 "clearfix" 伪元素。

选项 1：没有过渡高度

var  handles=document.querySelectorAll(".handle"),
     x=handles.length;
while(x--)
    handles[x].addEventListener("click",function(){
      this.parentNode.querySelector(".content").classList.toggle("hide");
    });

*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
.container{
  background:#ff0;
  border:1px solid #f00;
  margin:20px auto;
  width:90%;
}
.container::after{
  content:"";
  display:block;
  clear:both;
  height:0;
  width:0;
}
.content{
  background:#0f0;
  display: block;
  float:right;
  overflow:hidden;
  padding:20px 10px;
  transition-duration:0s,.5s,.5s,.5s;
  transition-property:max-height,padding,opacity,width;
  transition-timing-function:ease-in-out;
  white-space:nowrap;
  width:85%;
}
.content.hide{
  max-height:0;
  padding:0px;
  opacity:0;
  transition-delay:.5s,0s,0s,0s;
  width:0px;
 }
.handle{
  background:#aaa;
  float:right;
  height:100%;
  width:10%;
}

<div class="container">
  <div class="content hide">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>
<div class="container">
  <div class="content hide">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>
<div class="container">
  <div class="content hide">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>

选项 2：转换 height 并设置内联值

var  handles=document.querySelectorAll(".handle"),
     x=handles.length;
while(x--)
    handles[x].addEventListener("click",function(){
      this.parentNode.querySelector(".content").classList.toggle("hide");
    });

*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
.container{
  background:#ff0;
  border:1px solid #f00;
  margin:20px auto;
  width:90%;
}
.container::after{
  content:"";
  display:block;
  clear:both;
  height:0;
  width:0;
}
.content{
  background:#0f0;
  display: block;
  float:right;
  overflow:hidden;
  padding:20px 10px;
  transition-duration:.5s;
  transition-property:height,padding,opacity,width;
  transition-timing-function:ease-in-out;
  white-space:nowrap;
  width:85%;
}
.content.hide{
  height:0px!important;
  padding:0px;
  opacity:0;
  width:0px;
 }
.handle{
  background:#aaa;
  float:right;
  height:100%;
  width:10%;
}

<div class="container">
  <div class="content hide" style="height:125px;">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>
<div class="container">
  <div class="content hide" style="height:150px;">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>
<div class="container">
  <div class="content hide" style="height:175px;">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>

每次在动画之后完全移除元素。 - 仅使用 CSS

Remove the element completely after animation, each time. - only using CSS

javascript

html

css

ember-cli