为什么我的翻页卡动画在页面加载后第一次单击按钮时无法正常工作，但在第一次单击后却可以正常工作？

问题描述 投票：0回答：1

我目前正在为我的项目使用 HTML、CSS 和 JavaScript 制作翻转卡片动画。当单击“更多”按钮并且卡片翻转并显示背面时，动画将按预期工作。同样，单击“返回”按钮会将卡片翻转回其原始状态。

但是，我面临一个问题，即页面加载后第一次单击“更多”按钮时动画执行不流畅。它会翻转，但动画效果是部分完成的，没有 3d 效果。随后的点击工作正常并以正确的方式触发动画。

我在下面添加了我的 HTML、CSS 和 JavaScript 代码以供参考：

<div id="meal-card" class="card">
                        <div id="meal-card-front" class="card-front">
                            <div class="inline">
                                <h3 id="meal-name"></h3>
                                <p id="btn-container"><a id="btn-see-more" href="#<strong>More</strong></a></p>
                            </div>
                            <div><img id="meal-image" src=""></div>
                            <h4>Ingredients</h4>
                            <p id="ingredients"></p>
                        </div>
                        <div id="meal-card-back" class="card-back">
                            <div class="inline">
                                <h4>Instructions</h4>
                                <p id="btn-get-back"><a href="#"><strong>Back</strong></a></p>
                            </div>
                            <p id="instructions"></p>
                        </div>

.card {
    perspective: 1000px;
}


.card-front, .card-back{
    background: #fffcec;
    border-radius: 5px;
    text-align: center;
    width: 480px;
    height: 470px;
    padding: 0;
    box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.2);
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s;
}
  
.card-back {
    transform: rotateY(180deg);
}
  
/* This class is added to the card when it should flip */
.flipped .card-front{
    transform: rotateY(180deg);
}
  
.flipped .card-back {
    transform: rotateY(0deg);
}

var moreBtn = document.getElementById("btn-see-more");
var backBtn = document.getElementById("btn-get-back");

moreBtn.addEventListener("click", function(){
    mealCard.classList.add("flipped");
    $("#meal-card-back").show();
});

backBtn.addEventListener("click", function(){
    mealCard.classList.remove("flipped");
});

任何人都可以提供关于如何确保翻页卡动画即使在页面加载后第一次点击时也能顺利运行的见解或建议吗？

任何帮助或指导将不胜感激。谢谢！

javascript css-animations flip
1个回答
0
投票

不确定原始代码中的 

mealCard
是什么，因为您尚未将其包含在 JS 代码中。我只是尝试添加这一行并对您的 HTML 进行一些修复，因为缺少一些标签和引号。它似乎对我来说效果很好。

    var mealCard = document.getElementById('meal-card');


var moreBtn = document.getElementById('btn-see-more');
var backBtn = document.getElementById('btn-get-back');
var mealCard = document.getElementById('meal-card');

moreBtn.addEventListener('click', function() {
  mealCard.classList.add('flipped');
});

backBtn.addEventListener('click', function() {
  mealCard.classList.remove('flipped');
});
.card {
  perspective: 1000px;
}

.card-front,
.card-back {
  background: #fffcec;
  border-radius: 5px;
  text-align: center;
  width: 480px;
  height: 470px;
  padding: 0;
  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.2);
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.card-back {
  transform: rotateY(180deg);
}


/* This class is added to the card when it should flip */

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

.flipped .card-back {
  transform: rotateY(0deg);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Home</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <!--
      Need a visual blank slate?
      Remove all code in `styles.css`!
    -->
  <link rel="stylesheet" href="styles.css" />
  <script type="module" src="script.js"></script>
</head>

<body>
  <div id="meal-card" class="card">
    <div id="meal-card-front" class="card-front">
      <div class="inline">
        <h3 id="meal-name"></h3>
        <p id="btn-container">
          <a id="btn-see-more" href="#">
            <strong>More</strong>
          </a>
        </p>
      </div>
      <div>
        <img id=" meal-image " src=" " />
      </div>
      <h4>Ingredients</h4>
      <p id="ingredients "></p>
    </div>
    <div id="meal-card-back" class="card-back">
      <div class="inline">
        <h4>Instructions</h4>
        <p id="btn-get-back">
          <a href="# ">
            <strong>Back</strong>
          </a>
        </p>
      </div>
      <p id="instructions "></p>
    </div>
  </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.