显示 block 后单击时的 Javascript 转换

Question

我正在尝试在单击按钮时从右到左进行简单的转换。

我这样做是为了说明我的意思:https://jsfiddle.net/Waarx/9kjhnwLp/22/

var button1 = document.querySelector('#div1');
button1.addEventListener('click', function(event) {
  document.querySelector('#display2').style.display = "none";
  document.querySelector('#display1').style.display = "block";
});

var button2 = document.querySelector('#div2');
button2.addEventListener('click', function(event) {
  document.querySelector('#display2').style.display = "block";
  document.querySelector('#display1').style.display = "none";
});

.parent {
  width: 800px;
}

.col {
  float: left;
  width: 20%;
}

.col2 {
  width: 70%;
}

.none {
  display: none
}

<div class="parent">
  <div class="col">
    <a href="#" id="div1">Div1</a>
    <a href="#" id="div2">Div2</a>
  </div>
  <div class="col2">
    <div class="none" id="display1">
      display 1
    </div>
    <div class="none" id="display2">
      display 2
    </div>
  </div>
</div>

我希望你能帮助我。

Answer 1

首先你可以用更少的代码用 jQuery 做同样的事情:

$('#div1').click(function(event) {
  $('#display2').hide();
  $('#display1').show();
});

$('#div2').click(function(event) {
  $('#display2').show();
  $('#display1').hide();
});

其次:要为 html 元素设置动画，您必须设置其不透明度。 显示:无； will not animate at all .同样，只使用类可以让你在 CSS 上浪费更少的时间。所以，

在这里测试:

$( document ).ready(function() {
    $('.div1').click(function(event) {
      $('.display2').addClass('none');
      $('.display1').removeClass('none');
    });

    $('.div2').click(function(event) {
      $('.display2').removeClass('none');
      $('.display1').addClass('none');
    });
});

.display1, .display2 {
  transform: translateX(0);
  transition: all 1s ease-in-out;
}
.none {
  transform: translateX(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
  <div class="col">
      <a href="#" class="div1">Div1</a>
      <a href="#" class="div2">Div2</a>
  </div>
  <div class="col2">
    <div class="display1 none">
       display 1
    </div>
    <div class="display2 none">
      display 2
    </div>
  </div>
</div>