时间戳

首页 > 解决方案 > 我正在寻找让按钮（当前居中）动画到左上角onClick，我已经有一个连接到这个元素的函数

javascript - 我正在寻找让按钮（当前居中）动画到左上角onClick，我已经有一个连接到这个元素的函数

问题描述

我想要一个位于中心的按钮以动画到页面顶部或左上角。我已经有一个连接到这个元素的功能，它可以删除一个纯黑色的页面并进入主站点。是否可以让这个元素运行两个功能？一个是翻译动画，两个是去除纯色背景色。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sean Marc Howe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="overlay"></div>
    <div id="intro"; class="intro"></div>
    <div id="buttonWrapper1" class="buttonWrapper"><button class="introBtn" onclick="javascript:one(); two();"><img></button></div>

</body>
<script src="script.js"></script>
</html>




.intro {
  position: fixed;
  z-index: 2;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
}
.buttonWrapper {
  z-index: 10;
}
.buttonWrapper:active {
  transform-origin: top left;
}
.introBtn {
  /* position: absolute; */
  background-color: transparent;
  outline: none;
  top: 40%;
  right: 645px;
  left: 645px;
  z-index: 5;
  border: 2px solid white;
  border-radius: 50%;
  padding: 7px;
}
/* .introBtn:active {
  animation-name: slide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
} */

.introBtn:hover {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 7px;
  z-index: 2;
}

body {
  background-image: url("/images/pexels-kevin-ku-577585.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@keyframes slide {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0px, -280px);
  }
}


var bool = true;
function one() { 
    
    (bool) ? document.getElementById("intro").style.background = "rgb(0, 0, 0)" :  document.getElementById("intro").style.background = "rgba(0, 0, 0, 0)";
    bool = !bool;

// // function two(){
//     document.getElementById('intro').className ='classname';
//   }

}

标签： javascript

解决方案

您可以像以前一样使用 javascript 添加一个 css 类，然后使用transition. 然后你的 css 将弄清楚为你做什么，并为你的对象设置动画。

我toggle在我的示例中使用，但您可以使用add并且remove如果您只希望它触发一次，并且不可切换。

var bool = true;

function fadeOut() {
    document.getElementById("intro").classList.toggle("active");
}

function moveButton() {
    document.getElementById("buttonWrapper1").classList.toggle("active");
}
.intro {
  position: fixed;
  z-index: 2;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  transition: 2s ease;
}
.intro.active {
  background: black;
}

.buttonWrapper {
  z-index: 10;
  position: absolute;
  top: 10px;
  left: 50%;
  display: flex;
  justify-content: center;
  /* Set transition to animate */
  transition: 3s ease;
}

.buttonWrapper.active {
  left: 10px;
}

.buttonWrapper.active .introBtn {
  border: 2px solid black;
}

.introBtn {
  background-color: transparent;
  outline: none;
  top: 40%;
  right: 645px;
  left: 645px;
  z-index: 5;
  border: 2px solid white;
  border-radius: 50%;
  padding: 7px;
}
.introBtn:hover {
  cursor: pointer;
}
<html lang="en">
<body>
    <div class="overlay"></div>
    <div id="intro"; class="intro active"></div>
    <div id="buttonWrapper1" class="buttonWrapper"><button class="introBtn" onclick="javascript:fadeOut(); moveButton();"><img></button></div>

</body>
</html>

推荐阅读