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）然后对于'show'状态，我们删除边距和左边的值，以便'show'过渡从左边开始。

<强> FIDDLE

$(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>

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

2 个答案: