Question

我已经实现了div的翻转卡，当用户在div上盘旋时效果很好，但是当他们在div上取消时它不会解开，而是直接回到它最初的方式，而不提供顺利过渡回来。

任何人都可以帮助您在翻转卡片之前平滑过渡到原来的状态。

请参阅以下代码。

此外，here is a jsfiddle可以使问题更加清晰。

CSS

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 0 20px;
}
.background-out,
.background-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.background-info {
  position: absolute;
  left: 200px;
  top: 0;
  width: 100%;
  height: 100%; 
  visibility: hidden;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: grey;
}
.background-info .text {
  padding: 5px;
}
.background-out {
  background-color: red;
}
.background-over {
  background-color: green;
  visibility: hidden;
  opacity: 0;
  transform-origin: 100% 50% 0px;
  transform: rotateY(-90deg);
}
.wrapper:hover .background-out {
  visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
  transform: translate3d(0px,0px,0px) rotateY(0deg);
  transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
  -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
  -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
  visibility: visible;
  opacity: 1;
}

HTML

<div class="wrapper">
    <div class="background-out"></div>
    <div class="background-over"></div>
    <div class="background-info">
    <div class="text">Text 1</div>
  </div>
</div>

Answer 1

您还应该将过渡属性不仅添加到：悬停，还要添加到html元素本身。

See fiddle

<强> CSS

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 0 20px;
}

.background-out,
.background-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.background-out,
.background-over,
.background-info {

  transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
}

.background-info {
  position: absolute;
  left: 200px;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: grey;
}

.background-info .text {
  padding: 5px;
}

.background-out {
}

.background-over {
  background-color: green;
  opacity: 0;
  transform-origin: 100% 50% 0px;
  transform: rotateY(-90deg);
}

.wrapper:hover .background-out {
}

.wrapper:hover .background-over,
.wrapper:hover .background-info {
  transform: translate3d(0px, 0px, 0px) rotateY(0deg);
  transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
  opacity: 1;
}

<强> HTML

<div class="wrapper">
  <div class="background-out"></div>
  <div class="background-over"></div>
  <div class="background-info">
    <div class="text">Text 1</div>
  </div>
</div>

目录卡片。翻转时都会翻转，当用户显示时会翻转

1 个答案: