Как анимировать фиксированную позицию?

Question

Я пытаюсь анимировать DIV, который фиксируется через 1 секунду. Но я не могу сделать это. Я хочу, чтобы через одну секунду div с именем «homepage-hero-module» переместился справа налево. Как вы можете видеть в FIDDLE, он изменяется на фиксированный через одну секунду. Итак, как оживить это?

Я пробовал css, но не повезло.

-webkit-transition: left 1s; 
    -moz-transition: left 1s; 
    -o-transition: left 1s; 
    transition: left 1s; 

и

-webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 

JSFIDDLE

HTML КОД:

<div class="container-fluid"> 
    <div class="homepage-hero-module"> 
     Container with data 
    </div> 
</div> 

CSS КОД:

body, html { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
} 
.container-fluid { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.homepage-hero-module { 
    background: #DDD; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.fixed { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 20px; 
    height: 100%; 
    background: red; 
} 
img { 
    height: 100%; 
    width: auto; 
} 

JS код:

$(document).ready(function() { 
    setTimeout(function(){ 
       $('.homepage-hero-module').addClass('fixed'); 
    },1000); 
});  

Answer 1

Вы должны анимировать ширину, а положение по-прежнему является абсолютным, а затем установить позицию для фиксированного

<div class="container-fluid"> 
    <div class="homepage-hero-module"> 
     Container with data 
    </div> 
</div> 

body, html { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
} 
.container-fluid { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.homepage-hero-module { 
    background: #DDD; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    transition:all .2s ease; 
} 
.fixed { 
    top: 0px; 
    left: 0px; 
    width: 20px; 
    height: 100%; 
    background: red; 
} 
img { 
    height: 100%; 
    width: auto; 
} 

$(document).ready(function() { 
setTimeout(function(){ 
    $('.homepage-hero-module').addClass('fixed'); 
},1000); 
    $('.homepage-hero-module').css('position','fixed'); 
}); 

Answer 2

Уже работает я думаю, проверьте ниже фрагмент кода и дайте мне знайте свои отзывы. Благодаря!

$(document).ready(function() { 
 
    setTimeout(function() { 
 
    $('.homepage-hero-module').addClass('fixed'); 
 
    }, 1000); 
 
});

body, 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.container-fluid { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.homepage-hero-module { 
 
    background: #DDD; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 20px; 
 
    height: 100%; 
 
    background: red; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="homepage-hero-module"> 
 
    Container with data 
 
    </div> 
 
</div>

Answer 3

Вы можете сделать это только с помощью CSS. Проверьте CSS3 animation.

Живая демонстрация:

body, 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 
.container-fluid { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.homepage-hero-module { 
 
    width: 100%; 
 
    height: 100vh; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-color: #f5f5f5; 
 
    animation: slideleft 1s 0.3s ease-out forwards; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: auto; 
 
} 
 
@keyframes slideleft { 
 
    to { 
 
    background: coral; 
 
    width: 70px; 
 
    position: fixed; 
 
    } 
 
}

<div class="container-fluid"> 
 
    <div class="homepage-hero-module"> 
 
    Container with data 
 
    </div> 
 
</div>