在显示块后单击时单击的 JavaScript 过渡

Question

>im 当我单击按钮时，尝试从右到左进行简单的过渡。

我这样做是为了说明我的意思：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元素进行动画处理，您必须设置其不透明度。display: none;根本不会动画化。此外，仅使用类可以减少您在 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>