Увеличение ширины справа налево с использованием calc на IE

Question

У меня есть предмет, который должен расти справа налево. Он хорошо работает в некоторых браузерах, но в IE (даже Edge) он не работает.

Элемент имеет фиксированную ширину, но его родитель реагирует и имеет родственника, который должен быть абсолютным, чтобы быть скрытым, когда предмет растет.

Я сделал фрагмент, чтобы показать, как он должен работать (деталь красный один, нажмите на него):

Соответствующий CSS находится в детской-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- T o- R 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>