矩形开始固定在顶部中心动画到全屏答案

【问题标题】：Rectangle start fixed at top center animates to full screen矩形开始固定在顶部中心动画到全屏
【发布时间】：2018-09-17 00:17:47
【问题描述】：

我正在尝试为一个小矩形 div 设置动画，该 div 居中/固定在屏幕顶部，并将从中心缩放到全屏覆盖。这是我正在尝试创建的动画的线框图。

我现在有一个解决方案，但它绝对不是最干净或最优雅的：

&lt;div class="step1"&gt;&lt;/div&gt;

.step1 {
  border:none;
  background:none;
  text-align: Center;
  font-size: 1.6em;
  height: 200px;
  width: 300px;
  background-color: blue;
  position: fixed;
  left: 47%;
  margin-left: -1.75em;
  top: 0;
  z-index: 1;
  transition: all .2s;
}

.step2 {
  height: 100%;
  width: 100%;
  left: 0%;
  top: 0;
  margin: 0;
  border:none;
  background:none;
  color: white;
  text-align: Center;
  background-color: blue;
  position: fixed;
  z-index: 1;
  border-radius: 0;
}

我也得到了一个 janky 动画，我知道一定有更好的方法。谁能提供更清洁的解决方案？

【问题讨论】：

您的解决方案在哪里？你能用你的解决方案更新sn-p吗
究竟是如何触发动画的？
我正在使用 React，所以复制所有代码真的很困难。不过，这只是一个简单的切换类。

标签： javascript jquery css css-transitions

【解决方案1】：

您可以在.click() 上.toggleClass()：

$('div').click(function() {
  $(this).toggleClass('step');
});

div {
  width: 300px;
  height: 200px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* makes it horizontally centered */
  background: blue;
  transition: all .3s linear; /* added linear transition effect, it's "ease" by default */
}

.step {
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
}

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

<div></div>

【讨论】：

【解决方案2】：

我建议使用像这样的 css 动画

.step1 {
  border:none;
  background:none;
  text-align: Center;
  font-size: 1.6em;
  height: 200px;
  width: 300px;
  background-color: blue;
  position: fixed;
  left: 47%;
  margin-left: -1.75em;
  top: 0;
  z-index: 1;
  transition: all .2s;
  animation-name:demo;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

@keyframes demo{
  0%{height:200px;width:300px;left:47%;margin-left:-1,75em}
  100%{height:100%;width:100%;left:0;margin-left:0}
}

&lt;div class="step1"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

这是我的方法。您可以通过将鼠标悬停在 div 上来触发动画。我决定使用过渡，因为它对于像这样的简单应用程序更实用。

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<style type="text/css">
 div {
background-color: #ff0000;
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0px;
left: 50%;
transition: width 10s, height 10s,  left 10s;

}
div:hover {
width: 100%;
height: 100%;
left: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【讨论】：

【解决方案4】：

查看以下演示：

$(document).ready(() => {
  setTimeout(() => {
    $('#myDiv').toggleClass('step1 step2');
  },1000);
});

#myDiv {
  position: fixed;
  top: 0;  
  background-color: blue;
  transition: all .2s;
}

.step1 {
  left: 35%;
  right: 35%;
  height: 100px;
}

.step2 {
  left: 0;
  right: 0;
  height: auto;
  bottom: 0;
}

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

【讨论】：

正是我需要的结构，但动画需要更加流畅。

【解决方案5】：

这是一个简单的解决方案：

body {
  margin: 0;
  height: 100vh;
}

div {
  width: 300px;
  margin: auto;
  height: 200px;
  background: blue;
  animation: animate 3s linear 1s forwards;
}

@keyframes animate {
  to {
    width: 100%;
    height: 100%;
  }
}

&lt;div&gt;&lt;/div&gt;

【讨论】：