jQuery 翻转与淡入淡出

Question

我正在尝试创建一个翻转动画，该动画将淡出，直到翻转到达翻转动画的中间，并从该点淡入，直到翻转动画结束。 这是我到目前为止所得到的，但不是我想要实现的:

Fiddle Demo

HTML:

<button onclick="flip()">flip the card</button>
<section class="container">
  <div class="card" onclick="flip()">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>

CSS:

.container {
    width: 200px;
    height: 260px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 3s;
    -moz-transition: -moz-transform 3s;
    -o-transition: -o-transform 3s;
    transition: transform 3s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}
.card div {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
    background: blue;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

JS:

function flip() {
    $('.card').toggleClass('flipped').fadeOut(1500).fadeIn(1500);
}

有什么建议吗？

Answer 1

您可以使用“transition-timing-function”以相同的速度进行 CSS 过渡，并使用 fadeTo() 代替 jQuery 中的 fadeOut() 和 fadeIn()。

CSS:

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 3s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  transition: transform 3s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -webkit-transition-timing-function: linear; /* Safari and Chrome */
  transition-timing-function: linear;
}

JavaScript:

function flip() {    
  $('.card').toggleClass('flipped').fadeTo(1500,0,function(){ $(this).fadeTo(1500,1);});
}

代码片段:

function flip() {    
    $('.card').toggleClass('flipped').fadeTo(1500,0,function(){ $(this).fadeTo(1500,1);});
}

.container {
    width: 200px;
    height: 260px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 3s;
    -moz-transition: -moz-transform 3s;
    -o-transition: -o-transform 3s;
    transition: transform 3s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -webkit-transition-timing-function: linear; /* Safari and Chrome */
    transition-timing-function: linear;
}
.card div {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
    background: blue;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
    
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
  <div class="card" onclick="flip()">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>