Анимация плохо рендерится в Microsoft Edge - PullRequest
Новая
       6

Анимация плохо рендерится в Microsoft Edge

0 голосов
/ 21 ноября 2018

Я использую карту для блока новостей.

При наведении на карту накладка отображается сверху вниз (скользящая)

В браузерах 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>

1 Ответ

0 голосов
/ 21 ноября 2018

Как вы четко заявили, скользящая анимация в IE не работает, просто потому, что IE просто не поддерживает / частично не поддерживает calc() propoerty

BTW. Почему вы даете 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-всегда-работающий-т.е. /

Поддержка браузера: https://caniuse.com/#feat=calc

...