Question

我正在建立一个小型的个人网站用于练习目的，我遇到了一些我无法解决的问题。

我有一个div，点击翻转，扩大尺寸并向左移动。但是有一个令人讨厌的故障只在开始时发生，我无法弄清楚原因。

以下是codepen。如果一切正常，你再次刷新它，直到你看到动画中的毛刺。

在codepen中进入完整网站视图以便能够看到它。

这是我有时会发现的故障

  <div class="wrapper">

    <section class="container">
      <div id="card">
        <figure class = "front">
        </figure>
        <figure id = "backOfCard" class = "back"></figure>
      </div>
    </section>
  </div>

    .wrapper{
  height: 100%;
  background-image: url("bcgImg.jpg");
  background-size: cover;
  display: none;

}

section.container { 
  position: relative;
  top:50%;
  transform: translateY(-50%);
  width: 40%;
  height: 200px;
  perspective: 500px;
  margin-left: -100%;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;

}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  transition: 0.6s;
  height: 100%;
}

#card .front {
  border: 2px solid #ffeedd;
  text-align: center;
  background-color: rgba(85, 85, 51,0.5);
  transition: 0.8s;

}
#card .back {
  background: #ddbb33;
  transform: rotateY( 180deg );
  box-shadow: 0 0 20px black;
}

#card.flipped {
  transform: rotateY( 180deg );
}

#backOfCard.flipped{
 transform: rotateY( 0deg ); 
}

#card figure.front:hover{
    box-shadow: 10px 10px 30px black;
  transition: box-shadow 0.6s;
}

那是我的代码。

$(document).ready(function(){
$("#card").click(function(){
    var container= $("section.container");

            $("div#card").addClass("flipped").one(transitionEvent,function(event){
                container.animate({height: '100%'}).animate({marginLeft: '0',width: '300px'});;  
            });
       });
});

更新我注意到它主要发生在我第一次加载页面时。如果我重新启动页面，动画正常播放

动画计时无法正常执行

0 个答案: