在固定位置为屏幕大小设置动画元素 [英] Animate an element to the size of screen in fixed position

问题描述

如何在单击后为<div>设置动画以使其适合屏幕.始终停留在固定位置，然后显示该<div>

How do I animate a <div> to expand to fit the screen upon clicking. All while staying in fixed position, then revealing the contents of that <div>

图片:

推荐答案

1. 为您的元素设置CSS3 transition.
2. 创建一个类，使您的元素100vw和100vh(视口宽度高度单位)
点击
3. 添加该课程

1. Set a CSS3 transition to your element.
2. Create a class that makes your element 100vw and 100vh (viewport width height units)
3. Add that class on click

$("#box").on("click", function() {
  $(this).toggleClass("fullScreen");
});

html, body{height:100%;margin:0;}

/* YOUR BOX */
#box{
  position: fixed;
  overflow: hidden; /* in order to contain content */
  
  /* The initial styles: */
  border-radius: 25px;
  background: red;
  left:50px; bottom:50px;
  width: 50px;
  height: 50px;
  

  /* TRANSITION TO THE RESCUE */
          transition: 0.7s;
  -webkit-transition: 0.7s;
}

/* ADD THIS CLASS WITH JS */
#box.fullScreen{
  /* Your override styles: */
  border-radius: 0;
  background: gold;
  left:0; bottom:0;
  width: 100vw;
  height:100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">CLICK</div>

这篇关于在固定位置为屏幕大小设置动画元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！