How to animate to position fixed?


Tags: javascript,css

Problem :

I try to animate a DIV that gets fixed after 1 second. But I can't make it done. I want after one second the div called "homepage-hero-module" to slide from right to left. As you can see in the FIDDLE it changes to fixed after one second. So How to animate this?

I tried with css, but no luck.

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

and

-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 CODE:

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

CSS CODE:

    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 code:

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


Solution :

You need to animate the width while position is still absolute, and then set the position to fixed

<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');
});   

    CSS Howto..

    How to remove border-bottom of last div in a group - CSS

    How do I create a bar chart in CSS with an array of PHP float values?

    How to align a HTML definition list (
    ) horizontally without limiting term or definition in height?

    How do I fade in a div that has a set opacity?

    How can I add a CSS class to a page with jquery?

    android - How to build complex views that stretch?

    How to setup CSS for multiple font choices? [closed]

    Button Built in CSS showing different font color in FF and Webkit

    How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

    how to align div horizontally using CSS?

    How to hide submenu when user clicks option, but still display when user hovers over menu

    How to resize grid-view column width?

    How to manage multi tenant web portal css using Asp.Net MVC

    how to set menu to activate always hover effect on [closed]

    How to add css library to project generated with angular-cli@webpack

    How to preload predefined images in Java-Script / jQuery?

    How to make some controls visible and overlapping a DIV when mouse hovers on it? [closed]

    How do I customize