平稳的缩小动画

Question

我希望能够缩小HTML标签以使其消失，并且剩余项目的平稳消失（这样它们就不会跳到以前的标签的位置）

const div = document.querySelector('.toGo');
div.addEventListener('click', event => {
  div.className += ' animate';
  // Simulate Angular's DOM modification
  setTimeout(() => div.style.display = 'none', 1100);
  setTimeout(() => div.style.display = 'block', 1200);
  setTimeout(() => div.className = 'toGo', 1300);
});

.toGo, .toStay {
  height: 50px;
  width: 100%;
  background: coral;
  transition: all 1000ms ease-in-out;
  overflow: hidden;
}
.toStay {
  margin: 12px 0;
}
.animate {
  height: 0;
  width: 0;
  opacity: 0;
}

<div class="toGo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique sed nisi id aliquet. Etiam mauris diam, commodo in nisl ac, porttitor auctor mi. Nunc et blandit lacus. Donec facilisis dolor in arcu convallis, eu molestie magna placerat. Etiam blandit diam vitae nibh sollicitudin, ac gravida risus convallis. Nunc aliquet, turpis ac dignissim mollis, nulla nisi cursus leo, quis viverra nisi augue eget leo. Curabitur porta faucibus vestibulum.
</div>
<div class="toStay">Lorem Ipsum</div>
<p>Click on the first div</p>

如您所见，

现在，由于空间正在缩小，文本正在转移。

首先，我尝试使用transform属性，但是第二个DIV在第一个DIV属性（因为我使用的是Angular，并且框架完成动画完成后，将从DOM中删除第一个Div）。

const div = document.querySelector('.toGo');
div.addEventListener('click', event => {
  div.className += ' animate';
  // Simulate Angular's DOM modification
  setTimeout(() => div.style.display = 'none', 1100);
  setTimeout(() => div.style.display = 'block', 2100);
  setTimeout(() => div.className = 'toGo', 2200);
});

.toGo, .toStay {
  height: 50px;
  width: 100%;
  background: coral;
  transition: all 1000ms ease-in-out;
  overflow: hidden;
}
.toStay {
  margin: 12px 0;
}
.animate {
  transform: scale(0);
  opacity: 0;
}

<div class="toGo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique sed nisi id aliquet. Etiam mauris diam, commodo in nisl ac, porttitor auctor mi. Nunc et blandit lacus. Donec facilisis dolor in arcu convallis, eu molestie magna placerat. Etiam blandit diam vitae nibh sollicitudin, ac gravida risus convallis. Nunc aliquet, turpis ac dignissim mollis, nulla nisi cursus leo, quis viverra nisi augue eget leo. Curabitur porta faucibus vestibulum.
</div>
<div class="toStay">Lorem Ipsum</div>
<p>Click on the first div</p>

然后，我尝试了使用宽度/高度的解决方案，但文本正在转移。然后，我最终尝试使用一个容器，但没有改变任何东西（除非我将固定尺寸设置为该内部容器）。

有没有办法实现这一目标？

edit 人们实际上是在要求关闭我的问题，因为这不清楚。如果这不是很明显的话，我希望第一个片段停止移动文本，而第二个摘要则可以顺利移动第二个Div，以代替第一个Div（无需跳跃）。

类似的东西，无需用于内部容器的固定尺寸

const div = document.querySelector('.toGo');
div.addEventListener('click', event => {
  div.className += ' animate';
  // Simulate Angular's DOM modification
  setTimeout(() => div.style.display = 'none', 1100);
  setTimeout(() => div.style.display = 'block', 1200);
  setTimeout(() => div.className = 'toGo', 1300);
});

.toGo, .toStay {
  height: 50px;
  width: 100%;
  background: coral;
  transition: all 1000ms ease-in-out;
  overflow: hidden;
}
.container {
  height: 50px;
  width: 100vw;
}
.toStay {
  margin: 12px 0;
}
.animate {
  height: 0;
  width: 0;
  opacity: 0;
}

<div class="toGo">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique sed nisi id aliquet. Etiam mauris diam, commodo in nisl ac, porttitor auctor mi. Nunc et blandit lacus. Donec facilisis dolor in arcu convallis, eu molestie magna placerat. Etiam blandit diam vitae nibh sollicitudin, ac gravida risus convallis. Nunc aliquet, turpis ac dignissim mollis, nulla nisi cursus leo, quis viverra nisi augue eget leo. Curabitur porta faucibus vestibulum.
  </div>
</div>
<div class="toStay">Lorem Ipsum</div>
<p>Click on the first div</p>

Answer 1

您在第一个片段中的主要问题与边缘折叠有关创建跳跃效果的问题。考虑一个flexbox容器以避免边距崩溃：

然后，您可以考虑将剪辑路径动画与高度动画相结合（不要使宽度动画以避免收缩效果）

const div = document.querySelector('.toGo');
div.addEventListener('click', event => {
  div.className += ' animate';
  
  // Simulate Angular's DOM modification
  setTimeout(() => div.style.display = 'none', 1100);
  setTimeout(() => div.style.display = 'block', 1200);
  setTimeout(() => div.className = 'toGo', 1300);
});

body {
  display:flex;
  flex-direction:column;
}
.toGo, .toStay {
  height: 50px;
  width: 100%;
  background: coral;
  transition: all 1000ms ease-in-out;
  overflow: hidden;
  clip-path:polygon(0 0,100% 0,100% 100%, 0 100%);
}
.toStay {
  margin: 12px 0;
}
.animate {
  height: 0;
  opacity: 0;
  clip-path:polygon(0 0,0% 0,0% 100%, 0 100%);
}

<div class="toGo">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique sed nisi id aliquet. Etiam mauris diam, commodo in nisl ac, porttitor auctor mi. Nunc et blandit lacus. Donec facilisis dolor in arcu convallis, eu molestie magna placerat. Etiam blandit diam vitae nibh sollicitudin, ac gravida risus convallis. Nunc aliquet, turpis ac dignissim mollis, nulla nisi cursus leo, quis viverra nisi augue eget leo. Curabitur porta faucibus vestibulum.
</div>
<div class="toStay">Lorem Ipsum</div>
<p>Click on the first div</p>

您可以调整剪辑路径以控制动画的完成方式。

const div = document.querySelector('.toGo');
div.addEventListener('click', event => {
  div.className += ' animate';
  
  // Simulate Angular's DOM modification
  setTimeout(() => div.style.display = 'none', 1100);
  setTimeout(() => div.style.display = 'block', 1200);
  setTimeout(() => div.className = 'toGo', 1300);
});

body {
  display:flex;
  flex-direction:column;
}
.toGo, .toStay {
  height: 50px;
  width: 100%;
  background: coral;
  transition: all 1000ms ease-in-out;
  overflow: hidden;
  clip-path:polygon(0 0,100% 0,100% 100%, 0 100%);
}
.toStay {
  margin: 12px 0;
}
.animate {
  height: 0;
  opacity: 0;
  clip-path:polygon(50% 0,50% 0,50% 100%, 50% 100%);
}

<div class="toGo">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique sed nisi id aliquet. Etiam mauris diam, commodo in nisl ac, porttitor auctor mi. Nunc et blandit lacus. Donec facilisis dolor in arcu convallis, eu molestie magna placerat. Etiam blandit diam vitae nibh sollicitudin, ac gravida risus convallis. Nunc aliquet, turpis ac dignissim mollis, nulla nisi cursus leo, quis viverra nisi augue eget leo. Curabitur porta faucibus vestibulum.
</div>
<div class="toStay">Lorem Ipsum</div>
<p>Click on the first div</p>