如何使按钮从中心过渡到右边，反之亦然

Question

我试图在一个计算器站点上放置输入，然后单击一个大的计算水平居中按钮。我到处搜索代码并实现了一个。

/**********Then at the head of the page, I placed this in the document.ready part:

     Toggle Results **********/
$('.nav-toggle').click(function() {
  //get collapse content selector
  var collapse_content_selector = $(this).attr('href');

  //make the collapse content to be shown or hide
  var toggle_switch = $(this);
  $(collapse_content_selector).slideToggle("slow", function() {
    if ($(this).css('display') == 'none') {
      toggle_switch.html("Change Inputs"); //change the button label to be 'Change Inputs'
      $("#divResults").toggle("slow");
      /*toggle_switch.css({
      	"left":"50%",
      	"transform":"translateX(-50%)"
      });*/
      toggle_switch.switchClass("btnHideInputs", "btnShowInputs");
    } else {
      toggle_switch.html("Compute"); //change the button label to be 'Compute'
      $("#divResults").toggle("slow");
      /*toggle_switch.css({
      	"left":"78%",
      	"transform":"translateX(0%)"
      });*/
      toggle_switch.switchClass("btnShowInputs", "btnHideInputs");
    }
  });
});
/********** Toggle Results **********/

/********** I've used the following styles on the Compute button:

    Compute Button **********/

div.divDefault {
  text-align: center
}

div.divShowInputs {
  text-align: right
}

div#divCTACompute button:active {
  border: none;
}

div#divCTACompute button.btnDefault {
  background-color: #3c99ea;
  border: none;
  border-radius: 18px;
  color: #fff;
  font-size: 2.5em;
  margin: 30px auto;
  min-width: 300px;
  padding: 20px 0px;
  position: relative;
  /*	left: 50%; */
  text-align: center;
  width: 40%;
}

div#divCTACompute button.btnShowInputs {
  animation: move-in-steps 2s forwards;
  background-color: #3c99ea;
  border: none;
  border-radius: 18px;
  color: #fff;
  font-size: 1em;
  margin: 10px auto;
  min-width: 200px;
  padding: 10px 0px;
  position: relative;
  /*	left: 78%; */
  text-align: center;
  width: 20%;
}

div#divCTACompute button.btnHideInputs {
  animation: move-in-steps 2s forwards reverse;
  background-color: #3c99ea;
  border: none;
  border-radius: 18px;
  color: #fff;
  font-size: 2.5em;
  margin: 30px auto;
  min-width: 300px;
  padding: 20px 0px;
  position: relative;
  /*	left: 50%; */
  text-align: center;
  width: 40%;
}

.move-me-forward {
  animation: move-in-steps 1s forwards;
}

.move-me-back {
  animation: move-back-steps 1s forwards;
}

@keyframes move-in-steps {
  0% {
    left: 50%;
    transform: translateX(-50%);
  }
  100% {
    left: 78%;
    transform: translateX(0%);
  }
}

@keyframes move-back-steps {
  0% {
    left: 78%;
    transform: translateX(0%);
  }
  100% {
    left: 50%;
    transform: translateX(-50%);
  }
}

/********** /Compute Button **********/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- For the Compute button, this is the HTML:

    Compute button -->
<div class="container" id="divCTACompute">
  <button href="#divInputs" class="nav-toggle btnDefault">Compute</button>
</div>
<!-- /Compute button -->

我想要达到的效果是，当我单击计算按钮时，它将隐藏具有输入的div，显示具有结果的div，然后缩小尺寸并转到对。它也会改变其功能。

当它在右边并被单击时，它应该过渡回中心，变大，将其功能改回Compute，显示带有Input的div并隐藏带有结果的div。

我基本上可以做到，但是按钮从左向右转换（反之亦然）时遇到了麻烦。它仅在第一次尝试时效果良好，然后在后续尝试中完全消失。

此外，如果还不很清楚，那么我是一个完全新手，这就是为什么您会看到很多代码被注释掉的原因。我一直在尝试很多方法来使它正确，但我做不到：（

请帮助：（