Come posso far funzionare la proprietà di transizione in IE usando le proprietà 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); 
} 

Se si sostituisce la calc nella proprietà altezza px o %, la transizione funziona bene, ma con il calc, va solo da un'altezza all'altro senza transizione.

In altri browser che funziona bene, il problema è solo in IE

---

L'aggiunta del codice e JSFiddle example simile alla mia situazione reale.

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>

sì, lo so che nella mia impostazione bottom: 0 al <div> e solo modificare l'altezza caso, funziona anche, ma a causa del bug in IE, che solo le modifiche da un'altezza a un altro, ecco perché ho simulato l'effetto, cambiando la posizione in alto e l'altezza.

Quindi, come posso simulare questo tipo di effetto in IE?

Nota: Non è possibile utilizzare le unità di Viewport: vh, vw.

PD: il comportamento rara con IE nel mio caso è perché il passaggio da top: value a top: otherValue opere, ma la transizione height: calc(value)-height: calc(otherValue) non lo fa, questo è solo per guidare.

Answer 1

Che dire di this? Funziona come il tuo snippet di codice (secondo me), è OK in IE10/IE11. O non ho capito la tua vera situazione.

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>