CODEWITHSUNDEEP
htmlcss
Gillardo
Gillardo

Reputation: 9818

Css Animation "fullscreen" mode

I have an element on screen that i would like to go full screen. I have done this, by using the following css

.fullscreen { z-index: 2000; width: 100%; height: 100%; position: fixed; top: 0; left: 0; padding: 15px; background-color: white; }

Now i would like to have a nice animation when my element is clicked, so it looks a bit sexy as it maximizes and the same when it minimizes.

Can this be done??

I have tried transition: top .15s linear; but that doesnt seem to work

NOTE I cannot have the element start with position:fixed using css, unless i had to use javascript to toggle it, as this is a normal html element, so i do not always want it fixed.

here is the fiddle where i got the css from to go fullscreen, so you can see what i mean. http://jsfiddle.net/a7nzy6w6/1/

Upvotes: 2

Views: 12067

Answers (3)

Mooseman
Mooseman

Reputation: 18891

The position property can't be animated. If you start with position: fixed, it's no problem.

Fiddle: http://jsfiddle.net/a7nzy6w6/299/

#myDiv.fullscreen {
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#myDiv {
  position: fixed;
  width: 500px;
  height: 400px;
  top: 20px;
  left: 20px;
  transition: all .15s linear;
  background: #cc0000;
}

Note that using JavaScript you could find the position on the page and set it to fixed at the position as to not have to start with position: fixed, but that's outside the scope of this question.

Following up on comments to include a fade transition with CSS transition and jQuery for class toggles:

CSS:

#myDiv.fullscreen {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#myDiv.fade {
  opacity: 0;
}
#myDiv {
  width: 500px;
  height: 400px;
  top: 20px;
  left: 20px;
  background: #cc0000;
  transition: opacity .15s linear;
}

JS:

$('button').click(function(e) {
    var $div = $('#myDiv');
  $div.toggleClass('fade');
  setTimeout(function(){
    $div.toggleClass('fade fullscreen');
  }, 150);
});

Fiddle: http://jsfiddle.net/a7nzy6w6/308/

Upvotes: 3

Banzay
Banzay

Reputation: 9470

You need to use transition

$('button').click(function(e){
    $('#myDiv').toggleClass('fullscreen'); 
});
#myDiv{
  background:#c99;
     top: 0; 
    left: 0;
    position: fixed; 
    width:500px; 
    height:400px;
    transition: all 1s ease;
}

#myDiv.fullscreen{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    transition: all 1s ease;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="col-lg-12">
           <div id="myDiv">
               my div
              <button>Full Screen</button>
          </div>
      </div>
 </div>

Upvotes: 1

grinmax
grinmax

Reputation: 1855

Try this

<div class="row">
      <div class="col-lg-12">
           <div id="myDiv">
               my div
              <button>Full Screen</button>
          </div>
      </div>
 </div>

#myDiv.fullscreen{
    z-index: 9999; 
    min-width: 100%; 
    min-height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
 }

#myDiv{
  background:#cc0000; 
  min-width:500px; 
  max-width: 500px;
  min-height:400px;
  transition: all 500ms;
  }

live demo - http://jsfiddle.net/a7nzy6w6/306/

Upvotes: 0

Related Questions