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

【问题标题】：Width transition - select the transition direct for increase and decrease width宽度过渡 - 直接选择过渡以增加和减少宽度
【发布时间】：2014-12-04 18:49:57
【问题描述】：

我在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>

【问题讨论】：

标签： html css css-transitions

【解决方案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>

【讨论】：

嗯，它在你第一次显示和隐藏时有效，但在它之后就不行了。
我认为这不会很难。我想也许可以添加.show{left:0;width:200px;}。试试看。或者你必须在 JQuery 上添加它。
@azhpo - 好吧，问题是它正在转换所有属性，当应用.show 类时，我必须删除left 属性的转换。问题解决了！！！
@URL87 - 不用担心。很高兴我能帮忙:)

【解决方案2】：

1) 因为 div 的宽度是 200px，所以我们最初只是将 div （当它处于隐藏状态时）放在右侧....像这样：

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

这确保了“隐藏”过渡以另一种方式进行

2) 然后对于“显示”状态，我们删除边距和左侧值，以便“显示”转换从左侧开始。

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>

【讨论】：