Переход не запускается в обработчике событий

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>

Sass

  #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);
  }
}