W jaki sposób można wprowadzić właściwości przejścia w programie IE, używając właściwości Calc?

Question

element1 { 
    height: calc(100% - 50px); 
    -webkit-transition: .5s; 
    -moz-transition: .5s; 
    -ms-transition: .5s; 
    -o-transition: .5s; 
    transition: .5s; 
} 

element1:hover { 
    height: calc(100% - 200px); 
} 

Kiedy wymienić calc w nieruchomości wysokości przez px lub % przejście działa dobrze, ale z calc, po prostu przechodzi z jednego do drugiego bez wysokości przejścia.

W innych przeglądarkach to działa dobrze, problem jest tylko w IE

---

Dodanie kodu i JSFiddle example podobną do mojej realnej sytuacji.

div{ 
 
    position: fixed; 
 
    right: 0; 
 
    width: 250px; 
 
    height: calc(100% - 200px); 
 
    background: #1c8080; 
 
    top: 158px; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding-top: 40px; 
 
    font-size: 18px; 
 
    border: 1px solid #000; 
 
    
 
    -webkit-transition: all .3s; 
 
    -moz-transition: all .3s; 
 
    transition: all .3s; 
 
} 
 

 
div:hover{ 
 
    height: calc(100% - 100px); 
 
    top: 58px; 
 
} 
 

 
.bottom{ 
 
    position: absolute; 
 
    bottom: 15px; 
 
    width: 100%; 
 
    font-size: 26px; 
 
}

<div> 
 
    <p>Height's tansition</p> 
 
    <p>Works fine in Chrome, FF</p> 
 
    <p class="bottom">But not in IE</p> 
 
</div>

Tak, wiem, że w moim przypadku zachodzącego bottom: 0 do <div> i tylko zmianę wysokości, ale również działa, ale ze względu na błąd w IE, że tylko zmiany z jednej wysokości do jeszcze jeden, dlatego symulowałem efekt, zmieniając górną pozycję i wysokość.

Jak zatem symulować tego rodzaju efekty w IE?

Uwaga: Nie mogę używać jednostek rzutni: vh, vw.

PD: rzadkie zachowanie z IE w moim przypadku jest fakt, że przejście od top: value do top: otherValue prac, ale przejście z height: calc(value) do height: calc(otherValue) nie robi, to tylko do kierowania.

Answer 1

Co z numerem this? Działa jak twój fragment kodu (moim zdaniem), jest OK w IE10/IE11. Albo nie zrozumiałem twojej prawdziwej sytuacji.

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
div { 
 
    position: fixed; 
 
    right: 0; 
 
    width: 250px; 
 
    bottom: 0; 
 
    background: #1c8080; 
 
    top: 158px; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding-top: 40px; 
 
    font-size: 18px; 
 
    border: 1px solid #000; 
 
    
 
    -webkit-transition: all .3s; 
 
    -moz-transition: all .3s; 
 
    transition: all .3s; 
 
} 
 

 
div:hover { 
 
    top: 58px; 
 
} 
 

 
.bottom { 
 
    position: absolute; 
 
    bottom: 15px; 
 
    width: 100%; 
 
    font-size: 26px; 
 
}

<div> 
 
    <p>Height's transition</p> 
 
    <p>Works fine in Chrome, FF</p> 
 
    <p class="bottom">But not in IE</p> 
 
</div>