Блог

Я ищу способ анимировать переход при наведении курсора мыши с помощью css. И я надеюсь сохранить чистый css. Если нет, я буду использовать jquery в качестве резервной копии.

Это было бы моей целью:

Контейнер с разделом содержимого. И при наведении курсора он будет анимироваться / скользить вверх. Как показано на рисунке:

Я пробовал что-то вроде приведенного ниже кода. Проблема в том, что переход не анимирует auto часть. Содержимое имеет переменную высоту. Поэтому каждый раз оно отличается. (для каждого элемента сетки)

     .my_container{
        position: relative;
        width: 100%;
        padding-top: 160%;
        overflow: hidden;
    }

    .my_container > .my_content{
        position: absolute;
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
    }


    .my_container > my_content:hover{
        top: auto;
        bottom: 0;
    }

    .my_container * {
        -webkit-transition: all .6s ease-in-out;
        -moz-transition: all .6s ease-in-out;
        -o-transition: all .6s ease-in-out;
        transition: all .6s ease-in-out;
    }
  

Я думал об transform: translateY(); Но, насколько я знаю, это работает только с процентами и пикселями.

Цель состоит в том, чтобы анимировать выравнивание сверху вниз при наведении курсора мыши.

(ввод этого текста заставил меня подумать о другом. Это было бы бесполезно на мобильном устройстве, верно? :))

В случае, если существует известная связь между дочерним и родительским элементом, вы можете легко применить перевод.

Вот простой пример

 .box {
  height:100px;
  width:50px;
  margin:50px;
  border:3px solid;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  width:100%;
  height:143%;
  background:red;
  transition:1s all;
}
.box:hover::before {
  transform:translateY(-30%) 
  /* 143% is 100%
     100% is X% ---> X = 70% so we move by (100% - 70%)
  */
}  

 <div class="box">

</div>  

Вы можете выразить с помощью переменной CSS:

 .box {
  height:100px;
  width:50px;
  margin:50px;
  display:inline-block;
  border:3px solid;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  width:100%;
  height:calc(var(--p)*1%);
  background:red;
  transition:1s all;
}
.box:hover::before {
  transform:translateY(calc((10000/var(--p))*1% - 100%)) 
}  

 <div class="box" style="--p:143;">

</div>

<div class="box" style="--p:170;">

</div>

<div class="box" style="--p:120;">

</div>  

Обновить

В случае динамического содержимого вы можете добавить небольшой JS-код, как показано ниже:

 $('.box').each(function() {
  var h0 = $(this).height();
  var h1 = $(this).find('span').height();
  
  $(this).css('--t',(h0-h1));
})  

 .box {
  height: 100px;
  width: 50px;
  margin: 50px;
  display: inline-block;
  border: 3px solid;
  position: relative;
}

.box span {
  position: absolute;
  top: 0;
  width: 100%;
  background: red;
  transition: 1s all;
}

.box:hover span{
  transform: translateY(var(--t));
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est ex, pretium tempus turpis vitae, </span>
</div>

<div class="box">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

<div class="box">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est ex, pretium </span>
</div>  

Это мой jQuery подход. Он сравнивает размер контейнера и содержимого. И если он больше контейнера, он анимирует разницу, чтобы все было видно.

 var $ = jQuery;

$(document).ready(function () {

    $('.post_grid_item').hover(

        function() {

            $containter = $(this).find('.content_slide');
            $content = $(this).find('.content_slide > .vce-row-content');

            $content_height    = $content.outerHeight();
            $containter_height = $containter.outerHeight() ;

            // if content is bigger than container
            if( $content_height >  $containter_height ) {

                $content_hover_offset = $containter_height - $content_height;

                $content.animate({
                    top: $content_hover_offset   'px',
                }, 'fast');
            }

        },function() {

            $containter = $(this).find('.content_slide');
            $content = $(this).find('.content_slide > .vce-row-content');

            $content.animate({
                top: '0',
            },'fast');
        }
    );


});
  

Это дало бы мне больше условной гибкости при добавлении конкретных условий мобильного устройства.

Если кто-нибудь увидит какие-то улучшения, дайте мне знать.