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

Question

我正在尝试为屏幕顶部居中/固定的小矩形div设置动画，并将从中心缩放为全屏叠加。这是我想要创建的动画的线框。

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

<div class="step1"></div>

.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动画，我知道必须有一个更好的方法。谁能提供更清洁的解决方案？

Answer 1

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

$('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>

Answer 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}
}

<div class="step1"></div>

Answer 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>

Answer 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>

Answer 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%;
  }
}

<div></div>

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

问题描述投票：1回答：5

5个回答

最新问题

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

问题描述 投票：1回答：5

5个回答

最新问题

问题描述投票：1回答：5