Как анимировать выравнивание сверху вниз при наведении?
Я ищу способ анимировать переход при наведении с помощью css. И я надеюсь сохранить его чистым css. Если нет, я буду использовать jquery в качестве резервной копии.
Это было бы моей целью:
Контейнер с контентом div. И при наведении он будет анимироваться/скользить вверх. Как показано:
Я пробовал что-то вроде кода ниже. Проблема в том, что переход не анимирует часть 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(); Но, насколько я знаю, это работает только с процентами и px.
Цель состоит в том, чтобы анимировать его, выровненный сверху вниз при наведении.
(набрав это, я подумал о другом. Это было бы бесполезно на мобильном устройстве, верно? :))
У вас ошибка, пропущена точка во втором .my_container > .my_content блоке. И я не вижу никаких :hover. Это настоящий CSS?
Как вы уже сказали, это работает только с px or %, а не с auto. Возможно, вы могли бы использовать jQuery?
@Duannx, о, это здорово
@MrLister, :) да, забыл :hover. Это упрощенная версия моего кода да
@Refilon хм, я действительно надеялся сохранить это с помощью CSS. jQuery не будет проблемой. Просто предпочел это так
Ладно, знаешь что? Я пойду с jQuery
Ответы 2
Если между дочерним и родительским элементами существует известное отношение, вы можете легко применить перевод.
Вот основной пример
.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>Вау, это довольно мило. Одна вещь, однако, я нашел огромную ошибку в моем собственном объяснении по этому вопросу. Внутреннее содержимое имеет переменную высоту. Это зависит от длины текста на элемент сетки.
@Tim Я знаю;) Я просто дал решение на случай, если у вас есть высота, установленная в процентах, поскольку я не думаю, что есть простое универсальное решение с чистым CSS.
Ага, я так и думал. Тогда я буду использовать jquery. При этом я также могу подумать об условном поведении на разных устройствах.
:) Я не видел твоего редактирования. Хороший. аккуратный и чистый. Мне это нравится. Спасибо! Очень подробно.
Это мой 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');
}
);
});
Это дало бы мне больше условной гибкости при добавлении конкретных условий для мобильных устройств.
Если кто-то увидит какие-то улучшения, дайте мне знать.
На мобильных устройствах действие касания вызовет состояние наведения.