Toggling between full-screen with animation

I want to make an element that is somewhere on the page (and positioned absolutely) full-screen by making it's position fixed and I want to animate the transition.

See the following code:

$('.element').click(function(){
    $(this).css('left', this.getBoundingClientRect().left).css('top', this.getBoundingClientRect().top).toggleClass('fullscreen');
});
body {padding: 50px;}
.container {position: relative; width: 100px; height: 100px; float: left;}
.element {position: absolute; top: 0px; left: 0px; width: inherit; height: inherit; transition: 0s;}
.element.fullscreen {position: fixed; top: 0px !important; left: 0px !important; width: 100%; height: 100%; transition: 1s;}
<div class="container">
    <div class="element" style="background-color: red;"></div>
</div>
<div class="container">
    <div class="element" style="background-color: blue;"></div>
</div>
<div class="container">
    <div class="element" style="background-color: green;"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Use .css(properties) where properties is a plain object, to set the CSS properties at one and the same call to .css()

$('.element').click(function() {
  $(this).css({
  'left': this.getBoundingClientRect().left
  , 'top': this.getBoundingClientRect().top
  })
  .toggleClass('fullscreen');
});
body {
  padding: 50px;
}

.container {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
}

.element {
  position: absolute;
  top: 0px;
  left: 0px;
  width: inherit;
  height: inherit;
  transition: 0s;
}

.element.fullscreen {
  position: fixed;
  top: 0px !important;
  left: 0px !important;
  width: 100%;
  height: 100%;
  transition: 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">
  <div class="element" style="background-color: red;"></div>
</div>
<div class="container">
  <div class="element" style="background-color: blue;"></div>
</div>
<div class="container">
  <div class="element" style="background-color: green;"></div>
</div>

0 Comment

NO COMMENTS

LEAVE A REPLY

Captcha image