使用IE上的计算，从右到左将宽度递增

Question

我有一个应该从右到左生长的项目。它在某些浏览器中运行良好，但是在IE（甚至边缘）中都行不通。

该项目具有固定的宽度，但其父母的响应能力，并且具有绝对位置的兄弟姐妹，以便在项目生长时被隐藏。

我制作了一个片段以显示其应该如何工作（该项目是红色的，单击它）：

相关的CSS在Child-02中：

$(document).ready(function() {
  $('.child-02').click(function() {
    $(this).toggleClass('open');
  });
});

body {
  font-family: sans-serif;
}
h1,
h2 {
  font-weight: lighter;
  font-size: 14px;
}
div {
  border: solid 1px rgba(100, 100, 100, 0.5);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 10px;
  min-height: 40px;
  margin: 10px 0;
  background: rgba(100, 200, 255, 0.5);
  box-sizing: border-box;
}
.parent {
  min-height: 150px;
}
.child-01 {
  position: absolute;
  width: calc(50% - 20px);
  z-index: -1;
}
.child-02 {
  background: rgb(220, 90, 100);
  width: 150px;
  border-radius: 4px;
  transition: all 1s ease;
  margin-left: calc(100% - 150px);
}
.child-02.open {
  margin-left: 0;
  width: 100%;
  min-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uncle"></div>
<div class="parent">
  <div class="child-01">
    <h1>There's some text</h1>
    <h2>Here's a bit more</h2>
  </div>
  <div class="child-02">
  </div>
</div>
<div class="aunt"></div>

有没有办法做到这一点？

Answer 1

不太确定您会喜欢此解决方案，但它有效：）

IE从左到右制作动画的原因是，父元素的direction是LTR（ l eft-> eft- t t o- ight）。如果将父母的方向更改为RTL-动画将按照您的意愿进行。

这里的问题是，此更改需要您添加其他一些CSS的东西（以确保没有破坏）。

这是最终代码：

$(document).ready(function() {
  $('.child-02').click(function() {
    $(this).toggleClass('open');
  });
});

body {
  font-family: sans-serif;
}
h1,
h2 {
  font-weight: lighter;
  font-size: 14px;
}
div {
  border: solid 1px rgba(100, 100, 100, 0.5);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 10px;
  min-height: 40px;
  margin: 10px 0;
  background: rgba(100, 200, 255, 0.5);
  box-sizing: border-box;
}
.parent {
  min-height: 150px;
  direction: rtl;
}
.child-01 {
  position: absolute;
  width: calc(50% - 20px);
  z-index: -1;
  left: 20px;
  direction: ltr;
}
.child-02 {
  background: rgb(220, 90, 100);
  width: 150px;
  border-radius: 4px;
  transition: all 1s ease;
  margin-left: calc(100% - 150px);
}
.child-02.open {
  margin-left: 0;
  width: 100%;
  min-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uncle"></div>
<div class="parent">
  <div class="child-01">
    <h1>There's some text</h1>
    <h2>Here's a bit more</h2>
  </div>
  <div class="child-02">
  </div>
</div>
<div class="aunt"></div>

这是我对您的CSS所做的所有更改：

.parent {
  direction: rtl;
}
.child-01 {
  left: 20px;
  direction: ltr;
}

Answer 2

您可以使用transform而不是margin-left。

这是一个示例：

$(document).ready(function() {
  $('.child-02').click(function() {
    $(this).toggleClass('open');
  });
});

body {
  font-family: sans-serif;
}
h1,
h2 {
  font-weight: lighter;
  font-size: 14px;
}
div {
  border: solid 1px rgba(100, 100, 100, 0.5);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 10px;
  min-height: 40px;
  margin: 10px 0;
  background: rgba(100, 200, 255, 0.5);
  box-sizing: border-box;
}
.parent {
  min-height: 150px;
}
.child-01 {
  position: absolute;
  width: calc(50% - 20px);
  z-index: -1;
}
.child-02 {
  background: rgb(220, 90, 100);
  border-radius: 4px;
  transition: all 1s ease;
  transform: scaleX(.2);
  transform-origin: right;
}
.child-02.open {
  transform: scaleX(1);
  min-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uncle"></div>
<div class="parent">
  <div class="child-01">
    <h1>There's some text</h1>
    <h2>Here's a bit more</h2>
  </div>
  <div class="child-02">
  </div>
</div>
<div class="aunt"></div>