我有一个应该从右到左增长的物品。它在某些浏览器中运行良好,但在IE(甚至Edge)中它不起作用。
该项具有固定宽度,但其父级具有响应性,并且具有必须绝对定位的兄弟,以便在项目增长时隐藏。
我制作了一个片段来展示它应该如何工作(该项目是红色的,点击它):
相关的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>
&#13;
有办法做到这一点吗?
答案 0 :(得分:1)
不太确定你会喜欢这个解决方案,但它有效:)
IE
从左到右制作动画的原因是父元素的direction
为LTR
( L eft- Ť强>邻的 - [R 强>飞行)。如果您将父级的方向更改为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;
}
答案 1 :(得分:0)
您可以使用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>