css 记忆游戏中的翻转卡动画不工作

tzcvj98z 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(154)

所以我是一个初学者，我正在制作一个记忆游戏使用css，javascript和html和问题，我面临的是，furing转动动画只有一张卡可以真正转动，所以我很难动画他们的转动

var front=document.getElementsByClassName("front");
var back=document.getElementsByClassName("back");
var frontimage = document.getElementsByClassName("front-img");
var backimage = document.getElementsByClassName("back-img");

front.addEventListener("click",rotate());
front.addEventListener("click",changeimage());

function rotate(){
front.style.animation = "spinning 1 2s Linear";
back.style.animation = "spinning  1 2s Linear";


}

function changeimage(){
setTimeout(()=> {
    frontimage.src="Bounty1.png";

},2000)

}
这是我的卡片html，其中我在一个ul列表标签中完成了所有卡片，并且每张卡片由li标签表示：

<li>
        <div class="back">
            <img class="back-img" src="Bounty1.png">
            
        </div>
            <div class="front">
                
                
                <img class="front-img" src="img1.png">
            </div>

        
    </li>
                
        
    <li>
        <div class="back">
            <img class="back-img" src="Bounty1.png">
            
        </div>
            <div class="front">
                
                
                <img  class="front-img" src="img1.png">
            </div>

        
    </li>

css

来源：https://stackoverflow.com/questions/75047121/flipping-card-animation-in-memory-game-not-working

2条答案

按热度按时间

rmbxnbpk1#

以下是我对这个问题的解读，当你点击卡片时，它会翻转露出背面的图像，如果我有误解请评论或编辑原帖：）

var cards = document.getElementsByClassName("card");

//attach onclick listener for all cards
for (let card of cards) {
    card.addEventListener("click", () => rotate(card));
}

function rotate(card) {
    card.style.animation = "spinning 1 2s linear";

    setTimeout(() => {
        //move card at the back to the front
        card.children[0].style.zIndex = 1;
    }, 1000);
    setTimeout(() => {
        //flip image to correct orientation after animation finish
        card.children[0].children[0].style.transform = "scaleX(1)"; 
    }, 2000);
}

html, body {
  height: 100%;
  width: 100%;
}

@keyframes spinning {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(180deg);
    }
}

.card {
    height: 100px;
    width: 100px;
    position: relative;
}

.card > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.card > div > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.back-img {
    transform: scaleX(-1);
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="card">
        <div class="back">
            <img class="back-img" src="https://via.placeholder.com/300.png/f09/fff" />
        </div>
        <div class="front">
            <img class="front-img" src="https://via.placeholder.com/300.png/09f/fff" />
        </div>
    </div>

    <div class="card">
        <div class="back">
            <img class="back-img" src="https://via.placeholder.com/300.png/f09/fff" />
        </div>
        <div class="front">
            <img class="front-img" src="https://via.placeholder.com/300.png/09f/fff" />
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

赞(0）回复(0）举报 2023-01-10

ubof19bj2#

细节在示例中注解。CSS动画改编自此article。

/**
 * Collect all .card elements into a NodeList.
 * Register the "click" event to each .card.
 * When the "click" event is triggered on a .card, invoke event handler flip(e)
 */
document.querySelectorAll(".card")
.forEach(card => card.addEventListener("click", flip));

/**
* Toggles the .open class on the element that the user clicked.
*/
function flip(e) {
  this.classList.toggle("open");
}

*,
*::before,
*::after {
  box-sizing: border-box
}

:root {
  font: 300 5vmin/1 Consolas;
}

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

#table {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 0.5rem;
  width: 96vw;
  min-height: 100vh;
  margin-left: -40px;
}

/* 
This contains a .card and establishes a "3-D space".
`perspective` is roughly 3 times the value of the animated dimension. 
In this case it's @3x width since rotateX() is horizontal.
*/
.item {
  width: 10.25rem;
  height: 13.85rem;
  perspective: 30rem;
}

/*
This is the element that will be animated. 
`position: relative` defines it's borders as the reference points to
the two .face elements within.
`transition` defines the animation. In this case, `transform` is the property
which is animated, for a duration of 1 second, the easing pattern is "ease".
`transform-style` is neccessary so that .card is associated with it's 
parent's `perspective` property.
`transform-origin` determines where the rotation takes place relative to 
it's parent.
*/
.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 1s ease;
  transform-style: preserve-3d;
  transform-origin: center right;
}

/* 
Each .card will have two .face elements that represent "front" and "back".
`position: absolute` will keep them within their parent .card element.
`backspace-visibility: hidden` ensures that only one .face can be visible 
at a time.
*/
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 5rem;
  line-height: 13.85rem;
  backface-visibility: hidden;
}

.front {
  background: gold;
}

/*
`transform: rotateY(180deg)` makes .back initially flipped and hidden.
*/
.back {
  background: black;
  transform: rotateY(180deg);
}

/*
When .open is added to .card, the transforms are applied to it.
*/
.open {
  transform: translateX(-100%) rotateY(-180deg);
}

<menu id="table">
  <!-- Each card should have it's own "3D space" as it's parent -->
  <li class="item">
    <section class="card">
      <!-- Each card should have an element for it's "front and one
      for it's back -->
      <div class="face front">💣</div>
      <div class="face back">💥</div>
    </section>
  </li>
  <li class="item">
    <section class="card">
      <div class="face front">💣</div>
      <div class="face back">💥</div>
    </section>
  </li>
  <li class="item">
    <section class="card">
      <div class="face front">💣</div>
      <div class="face back">💥</div>
    </section>
  </li>
  <li class="item">
    <section class="card">
      <div class="face front">💣</div>
      <div class="face back">💥</div>
    </section>
  </li>
  <li class="item">
    <section class="card">
      <div class="face front">💣</div>
      <div class="face back">💥</div>
    </section>
  </li>
</menu>

赞(0）回复(0）举报 2023-01-10

我来回答

css 记忆游戏中的翻转卡动画不工作

2条答案

相关问题

热门标签

最新问答