The 'Slide' button allows for toggling a left-margin. I am currently seeking a solution to animate this left-margin using transitions, but it appears that applying a transition to any calc()ed element is causing a bug in IE11.
For a sample demonstration, please refer to the JS Bin link provided below: https://jsbin.com/qirozodete/1/edit?html,css,output or view the code snippet below.
This example represents a basic prototype of my current project. The goal is to create an element that smoothly slides and shrinks by one grid column at various screen resolutions. Currently, I am using a calc() function to determine the size of a grid column, which functions correctly on Firefox, Chrome, and Safari but not on Internet Explorer.
I have ruled out the option of using transform: translate as it prevents the element from shrinking properly, and the calculations required are more intricate than simply stacking translations.
Any suggestions or solutions would be greatly appreciated.
document.getElementById('slide-btn').addEventListener('click', function() {
document.getElementById('grid').classList.toggle('slide');
})button {
background: white;
border: 1px solid black;
padding: 5px 10px;
}
#grid {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
}
#grid-item-1 {
background: teal;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
height: 150px;
transition: margin-left 500ms ease-in;
}
#grid.slide #grid-item-1 {
margin-left: calc(100vw / 4);
}<button id="slide-btn">Slide</button>
<div id="grid">
<div id="grid-item-1"></div>
</div>