javascript - 动画在 Microsoft Edge 中呈现不佳

Question

我正在为新闻 block 使用卡片。

将鼠标悬停在卡片上时，会从底部到顶部(滑动)出现一个叠加层

在 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() propoerty

顺便说一句.. 你为什么要给 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>

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

Browser support: https://caniuse.com/#feat=calc