Question

所以我使用CSS过渡来将多个块组合在一起并形成一个新图像（在这种情况下是一个房子）。事实上，我在每个街区都使用延迟，所以他们开始在不同的时间进入。这一切都很好。

现在，我想要发生的是当我点击一个不同的按钮时，这些块需要被发送回原来的位置，并且它们出现的顺序相反。

.house-container {
  position: relative;
  overflow: hidden;
}
.house-block {
  letter-spacing: 1px;
  position: relative;
  text-align: center;
  color: #fff
}
.roof {
  position: absolute;
  top: -228px;
  transition: top .5s ease 2.5s
}
.roof.moved {
  top: 0
}
.peak {
  position: absolute;
  top: -145px;
  right: 76px;
  transition: top .5s ease 2.0s
}
.peak.moved {
  top: 47px
}
.peak:hover {
  transform: scale(1.2, 1.2);
  z-index: 99
}
.top-left {
  position: absolute;
  left: -165px;
  top: 194px;
  transition: left .5s ease 1.2s;
}
.top-left.moved {
  left: 103px
}
.top-left:hover {
  transform: scale(1.2, 1.2);
  z-index: 99
}
.top-center {
  position: absolute;
  left: 257px;
  top: -170px;
  transition: top .5s ease 1.6s
}
.top-center.moved {
  top: 194px;
  left: 257px
}
.top-center:hover {
  transform: scale(1.2, 1.2);
  z-index: 99
}
.top-right {
  position: absolute;
  left: 640px;
  top: 194px;
  transition: left .5s ease 0.9s
}
.top-right.moved {
  top: 194px;
  left: 442px
}
.top-right:hover {
  transform: scale(1.2, 1.2);
  z-index: 99
}
.bottom-left {
  position: absolute;
  left: -165px;
  top: 392px;
  transition: left .5s ease 0.3s
}
.bottom-left.moved {
  left: 103px;
  top: 392px
}
.bottom-left:hover {
  transform: scale(1.2, 1.2);
  z-index: 99
}
.bottom-right {
  position: absolute;
  left: 660px;
  top: 467px;
  transition: left .5s ease 0.1s
}
.bottom-right.moved {
  top: 467px;
  left: 257px
}
.bottom-right:hover {
  transform: scale(1.2, 1.2);
  z-index: 99
}
.middle-center {
  position: absolute;
  left: 257px;
  top: -120px;
  transition: top .5s ease 0.6s
}
.middle-center.moved {
  top: 355px;
  left: 257px
}
.middle-center:hover {
  transform: scale(1.2, 1.2);
  z-index: 99
}
.house-block .energy-mngt {
  position: absolute;
  width: 464px;
  top: 20%
}
.house-block .water-conver {
  position: absolute;
  width: 150px;
  top: 20%
}
.house-block .solar {
  position: absolute;
  width: 181px;
  top: 20%
}
.house-block .leed-certfd {
  position: absolute;
  width: 123px;
  top: 30%
}
.house-block .multimedia {
  position: absolute;
  width: 181px;
  top: 30%
}
.house-block .security {
  position: absolute;
  width: 150px;
  top: 25%
}
.house-block .auto-cont-integri {
  position: absolute;
  width: 308px;
  top: 10%
}
.house-block h4 {
  display: block;
  font-weight: 700;
  margin-bottom: 0
}
.house-block .solar h4, .house-block .multimedia h4, .house-block .auto-cont-integri h4 {
  display: inline-block;
  margin-top: 20px
}

如上所示，.roof是最后出现的元素（2.5秒延迟），.bottom-right块是第一个（.1s延迟）。我希望隐藏时以相反的顺序发生这些相同的延迟（从元素中删除.moved类）。

这甚至可能吗？

由于

Answer 1

当然可以，只需将前向延迟添加到您的＆＃34;可见＆＃34;状态和向后延迟到正常状态。或者，如果你有一个＆＃34;隐藏＆＃34;说明另一种方式：

.my-element.-isVisible {
  ...
  transition-delay: 1s;
}

.my-element {
  ...
  transition-delay: 2.5s;
}

当元素变为＆＃34;可见＆＃34;这将增加1秒延迟。如果变为“隐藏”，则会延迟2.5秒。试。

多次延迟的CSS转换

1 个答案: