javascript - 转换未在事件处理程序中触发

Question

这是我想要解决手头问题的示例：

https://codepen.io/binnny/pen/ExPpggQ

当我单击按钮时，不会translateY()触发向下滑动，#main_card这样#next_card就会出现。我还想重置过渡，因为每张下一张卡最终都会成为主卡，并且必须为下一张卡创建新内容。

因此，对于每次点击它都会：

main: A --> next: B
main: B --> next: C
main: C -- next: D

实际发生的是内容在变化，但没有下滑过渡。不确定如何解决此问题以获得每次点击的预期结果？

HTML

    <main id="quote-box">
      <div id="next_card">
        <p id="_text"></p>
        <p id="_author"></p>
      </div>
      <div id="main_card">
        <p id="text"></p>
        <p id="author"></p>
      </div>
    </main>

萨斯

  #quote-box {
    position: relative;
    overflow: hidden;
    width: 80vw;
    height: 300px;
    margin: auto;
    border: 7px solid;

      #next_card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        text-align: center;
        width: 100%;
        height: inherit;
      }

      #main_card {
        @extend #next_card;
        position: absolute;
        top: 0;
      }
    }

JavaScript

var quotes = [
  {text: "Hello Earth!", author: "Me"}, {text: "Hello Mars!", author: "You"}, 
  {text: "Hello Pluto", author: "Dunno"}, {text: "Hello Jupiter!", author: "Fiddo"},          
  {text: "Hello Uranus!", author: "Bozo"}, {text: "Hello Venus!", author: "Mom"}
];

var button = document.querySelector("button");

window.onload = function(event) {
  var next_card = document.getElementById("next_card");
  var main_card = document.getElementById("main_card");

  [next_card, main_card].forEach(function(card) {
      create_quote(card);
  });
};

function create_quote(card) {
  // style the card with quote
  card.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]
  var selected_quote = quotes[Math.floor(Math.random() * quotes.length)];

  var card_attrs = Array.prototype.slice.call(card.children);
  card_attrs.forEach(function(attr) {
    attr.innerText = selected_quote[attr.id.replace("_", "")];
  });
  return card;
}


function shift_quote(event) {
  event.preventDefault();
  var next_card = document.getElementById("next_card");
  var main_card = document.getElementById("main_card");

  main_card.style.transform = "translateY(300px)";

  var updated_main_card = next_card.cloneNode(true);
  updated_main_card.id = "main_card";
  next_card.parentElement.replaceChild(updated_main_card, main_card);

  for (var i = 0; i < 2; i++) {
    create_quote(next_card);
  }
}

标签： javascriptcss