宽度过渡 - 选择直接过渡以增加和减少宽度

Question

我在div上有一个过渡宽度规则 -

.CSS-

div {
    height : 100px ; 
    width : 0px ; 
    transition-property: width;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}
.show {
    width : 200px ;
}

.HTML-

<div></div>

当我在show类上切换时，过渡通过以下方式发生 -

增加宽度 - 从左到右，

减小宽度 - 从右到左。

我想让它成为这样——

增加宽度 - 从左到右，

减小宽度 - 从左到右。

如何实现呢？

$( document ).ready(function() {
			$("#btnShow").click(function () {
				$("div").addClass("show");
			});
			$("#btnHide").click(function () {
				$("div").removeClass("show");
			});	
		});

div {
		background-color: #b0c4de;
		height : 100px ; 
		width : 0px ; 
		transition-property: width;
		transition-duration: 0.3s;
		transition-timing-function: linear;
	}
	
	.show {
		width : 200px ;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
	<button type="button" id="btnShow">Show</button>
	<br>
	<button type="button" id="btnHide">Hide</button>

Answer 1

您可以添加另一个类.hide，给它一个width: 0和left: 200px，这将在width减小时从左向右移动框。

应用 .show 类时，仅对 width 属性进行动画处理，这会将div对齐到其原始位置，并在应用.hide时width和left进行动画处理，这将对width进行动画处理，left为您提供所需的内容。

$(document).ready(function() {
  $("#btnShow").click(function() {
    $("div").removeClass("hide").addClass("show");
  });
  $("#btnHide").click(function() {
    $("div").removeClass("show").addClass("hide");
  });
});

div {
  background-color: #b0c4de;
  position: relative;
  left: 0;
  height: 100px;
  width: 0;
  transition: all 0.3s linear;
}
.show {
  transition-property: width;
  left: 0;
  width: 200px;
}
.hide {
  transition-property: width, left;
  width: 0;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
<button type="button" id="btnShow">Show</button>
<br />
<button type="button" id="btnHide">Hide</button>

Answer 2

1）因为div的宽度是200px，所以我们最初只是将div（当它处于隐藏状态时）放在右边。喜欢这个：

margin-left: 400px;
left: -200px

这可确保"隐藏"转换以另一种方式进行

2）然后对于"显示"状态，我们删除边距和左值，以便"显示"过渡从左侧开始。

小提琴

$(document).ready(function() {
  $("#btnShow").click(function() {
    $("div").addClass("show");
  });
  $("#btnHide").click(function() {
    $("div").removeClass("show");
  });
});

div {
  background-color: #b0c4de;
  height: 100px;
  width: 0px;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  position: relative;
  left: -200px;
  margin-left: 400px;
}
.show {
  width: 200px;
  left: 0;
  margin-left: 0;
  transition-property: width;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button type="button" id="btnShow">Show</button>
<br>
<button type="button" id="btnHide">Hide</button>