TranslateX дочерний div внутри родителя с шириной 100%

Question

Я пытаюсь сделать некоторые jQuery-забавы на своем веб-сайте, идея состоит в том, что при прокрутке вниз страницы родительский div растет на 100% для гибкого дизайна, и отлично работает, и в то же время я хочу, чтобы дочерний div и всегда оставался на правом краю родителя для анимации и для разных размеров видовых экранов, только я могу сделать эту работу с float: left; и addClass из right: 0;. Он работает, но он просто прыгает вправо. Есть ли способ оживить это?

Я нашел это, но это не решает мою проблему, потому что родитель имеет точную ширину пикселя:

How to use transform:translateX to move a child element horizontally 100% across the parent

<div class = "parent"> 
    <div class = "child"></div> 
</div> 

CSS

.parent { 
    position: relative; 
    width: 180px; 
    height: 180px; 
    transition: all ease-in-out 300ms; 
} 

.child { 
    position: absolute; 
    width: 180px; 
    height: 180px; 
    float: left; 
    transition: all ease-in-out 300ms; 
} 

.moveParent { 
    width: 100%; 
} 

.moveChild { 
    right: 0px; 
} 

JQuery

$(window).scroll(function(){ 
    var wScroll = $(this).scrollTop(); 
    if(wScroll > $('.parent').offset().top){ 
     $('.parent').addClass('moveParent'); 
     $('child').addClass('moveChild'); 
    } 
}); 

Answer 1

CSS переходы должны изменить от что-то к что-то еще, так что это не будет работать, если вы просто говорите right: 0;. Чтобы анимация работала правильно, вам нужно установить правильное значение по умолчанию.
Изменение CSS, чтобы выглядеть следующим образом:

CSS

.child { 
    position: absolute; 
    width: 180px; 
    height: 180px; 
    right: calc(100% - 180px); 
    transition: all ease-in-out 300ms; 
} 

Это выровняет DIV слева первоначально вычисляя справа: 100% - ширина вашего DIV (в 180px). Затем после наведения он будет анимировать вправо с помощью right: 0;.

JSFiddle

Answer 2

Float не является анимируемым свойство в CSS, поэтому, даже если вы установили переход на «все», как только вы добавляете класс, будет применяться эффект, и он не будет живой. Read More

Возможно, вы захотите поэкспериментировать со стартом в left: 0 и оживите это.

Вот рабочая скрипку: JSFiddle