动画在Microsoft Edge中渲染不好

Question

我正在使用一张用于新闻块的卡片。

悬停卡片时，从下到上(滑动(将出现覆盖

在Firefox和Chrome浏览器上一切都很好，当在IE中查看时，动画渲染非常糟糕，也没有滑动动画

有人能指引我吗？我会把我的代码附在这里。

欢迎任何改进、建议或替代解决方案。

ps：我目前正在使用Microsoft Edge 42.17134.1.0

.card_container{ 
position:relative; 
width:280px; 
margin:auto; 
background:rgba(0,0,0,0.2); 
height:450px; overflow:hidden;
}
.card_text{
position:absolute; 
color:#fff; 
height:100%; 
width:100%; 
top:0; 
left:0;
}
.card_text .pre_state {
position:absolute; 
top:calc(100% - 30%); 
width:100%; 
padding:30px 15px 25px; 
height:100%; 
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular'; 
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute; 
bottom:15%; 
font:14px/22px 'Graphik-Medium'; 
color:#fff; 
display:none;
}
.card_container:hover .card_text .pre_state{
top:0; 
background-color:rgba(51,154,205,0.7); 
transition:all .5s ease-out, all 0.5s ease-in; 
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}

<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
				<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
						<a href="#" class="hidn">Read more &gt; </a>
</div>	
</div>
</div>

Answer 1

正如您明确指出的，滑动动画在IE中不起作用，只是因为IE不支持/部分支持calc()比例

顺便说一句。。你为什么给top:calc(100% - 30%);？你可以直接提到它是top:70%;

试试这个

.card_container{ 
position:relative; 
width:280px; 
margin:auto; 
background:rgba(0,0,0,0.2); 
height:450px; overflow:hidden;
}
.card_text{
position:absolute; 
color:#fff; 
height:100%; 
width:100%; 
top:0; 
left:0;
}
.card_text .pre_state {
position:absolute; 
/*top:calc(100% - 30%); */
top: 70%;
width:100%; 
padding:30px 15px 25px; 
height:100%; 
transform:translate(0%, -30px);
}
.card_text h5{
font:14px/25px 'Graphik-Regular'; 
padding-bottom:10px;
}
.card_text h2{
font:20px/22px 'Graphik-Medium';
}
.card_text a.hidn{
position:absolute; 
bottom:15%; 
font:14px/22px 'Graphik-Medium'; 
color:#fff; 
display:none;
}
.card_container:hover .card_text .pre_state{
top:0; 
background-color:rgba(51,154,205,0.7); 
transition:all .5s ease-out, all 0.5s ease-in; 
transform:none;
}
.card_container:hover .card_text a.hidn{
display:block;
}

<div class="card_container">
<div class="card_text">
<div class="pre_state">
<h5>20 Oktober 2018</h5>
				<h2>Vestibulum facilisis, tortor atrutrum cursus.</h2>
						<a href="#" class="hidn">Read more &gt; </a>
</div>	
</div>
</div>

引用：https://css-tricks.com/forums/topic/calc-not-always-working-in-ie/

浏览器支持：https://caniuse.com/#feat=calc