कैलक गुणों का उपयोग कर आईई में संक्रमण संपत्ति का काम कैसे कर सकता हूं?

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); 
} 

जब मैं px या % द्वारा ऊंचाई संपत्ति में calc की जगह, संक्रमण ठीक काम करता है, लेकिन calc के साथ, बस संक्रमण के बिना एक ऊंचाई से चला जाता है।

अन्य ब्राउज़रों में यह ठीक काम करता है, समस्या केवल IE

---

कोड और JSFiddle example मेरा असली स्थिति के लिए समान जोड़ना है।

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>

हाँ, मुझे पता है कि मेरे मामले <div> को bottom: 0 स्थापित करने और केवल ऊंचाई को बदलने में, यह भी लेकिन IE में बग के कारण काम करता है, कि एक ऊंचाई से करने के लिए केवल परिवर्तन एक और, यही कारण है कि मैंने प्रभाव को अनुकरण किया, शीर्ष स्थान और ऊंचाई को बदल दिया।

तो, मैं आईई में इस तरह के प्रभाव का अनुकरण कैसे कर सकता हूं?

नोट: मैं व्यूपोर्ट इकाइयों का उपयोग नहीं कर सकता: vh, vw।

पीडी: मेरे मामले में IE के साथ दुर्लभ व्यवहार क्योंकि top: valuetop: otherValue लिए काम करता है से संक्रमण लेकिन संक्रमण height: calc(value) से height: calc(otherValue) के लिए नहीं करता है, यह सिर्फ मार्गदर्शन करने के है।

Answer 1

this के बारे में क्या? आपके कोड स्निपेट (मेरी राय में) की तरह काम करता है, यह IE10/IE11 में ठीक है। या मैं आपकी असली स्थिति को समझ नहीं पाया।

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>