Question

是否可以创建一个 cross 溶解过渡，其中一个元素溶解而另一个元素暴露出来？

我可以发布我所拥有的内容，但区别是一个消失，而另一个逐渐消失。我只能让它们一个接一个地淡入。一个淡出，然后另一个淡入。

Answer 1

是的，有可能。创建两个单独的css动画（我想这是您正在使用的技术），一个用于淡入，另一个用于淡出。设置淡入动画的延迟以满足您的需求，例如：animation-delay: 3s;。有效地延迟第二个动画，您可以将其设置为等待第一个动画完成。

Answer 2

是的，有可能。

在下面的示例中，我有一个包含内容的容器元素。容器元素具有position:relative以使其保持在正常流程中的位置，但还可以作为将具有position:absolute以使其在屏幕上包含相同位置的子项的锚定（因为具有位置：绝对我也设置了with和height）。我使用opacity和transition在内容之间淡入淡出。

默认情况下，内容具有opacity:0使其不可见。然后，规则visible会将其更改为opacity:1，过渡将使其在指定时间内淡入淡出。

如果计时不是您想要的，则可以将其更改为ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)中的任何一个。通过定义相同的属性，但在visible上使用不同的值和默认值，可以为淡入和淡出使用不同的值。

"use strict";
const content = document.querySelectorAll(".content");

setInterval(()=>
  content.forEach( elem => elem.classList.toggle("visible")),
  3000
);

.container {
  position:relative; /* bind coordonates to this element */
  height:50px;
  width:200px;
  background:#ccc;
}
.content {
  position:absolute; /* let content overlap */
  top: 0;
  left: 0;
  opacity:0; /* hide content */
  transition: opacity 2s;
  height:50px;
  width:200px;
  background:#ccc;
  color:#000;
  overflow:auto;
}
.content.two {
  background:#88f;
  color:#fff;
}
.content.visible {
  opacity:1;
}

<div class="container">
<div class="content one visible">Hello!<br>This is content</div>
<div class="content two">This is another content</div>
</div>

是否可以使用两个div创建交叉溶解？

2 个答案: