Question

我正在用卡遮挡新闻。

将鼠标悬停在卡片上时，会从下到上显示一个叠加层（滑动）

在IE中查看动画时，Firefox和Chrome浏览器上的一切运行都很好，动画也很糟糕，而且动画也没有滑动

任何人都可以指导我，我将在此处附加我的代码。

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

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

动画在Microsoft Edge中无法很好地渲染

1 个答案: