单击显示块后的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元素设置动画，您必须设置其 opacity 。 display: none; 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>