时间戳

首页 > 解决方案 > 在按钮单击问题javascript，css上向上滑动和向下滑动覆盖

javascript - 在按钮单击问题javascript，css上向上滑动和向下滑动覆盖

问题描述

所以我想用黑色背景和一个从顶部到中心向下滑动的文本（使用 @-webkit-keyframes 和 from,to 方法包含 translate() css 事件）单击字体真棒youtube 图标，然后在单击覆盖文本下的字体真棒复选框（使用 onclick="myFunction()" html 参数）时使其从中心滑动到顶部，我成功地制作了单击字体的部分很棒的 youtube 图标和黑色叠加层弹出，文本以一个很好的过渡向下滑动，但是当我点击 font awesome 复选框时，我无法让它向上滑动。

我尝试使用本文进行从中心到顶部的转换，滑出转换以放入与我的 onClick="myFunction" 参数匹配的 JavaScript 代码：使用 JavaScript 设置 webkit-keyframes from/to 参数。这是我的代码：

HTML：

<div class="youtubebutton">
<a class="fab fa-youtube" id="youtube" onclick="ytbclick()"></a>
</div>
<div id="overlayytb">
  <div id="text">This link is coming soon.<div>
  <a class="fas fa-check-square" onclick="okbutton()"></a>
</div>

Javascript：

<script>

function ytbclick() {
document.getElementById("overlayytb").style.display = "block";
}

function okbutton() {

  // document.getElementById("text").style.animationDirection = "reverse";
  // document.getElementById("text").style.Display = "block";
  var cssAnimation = document.createElement('style');
  cssAnimation.type = 'text/css';
  var rules = document.createTextNode('#newtext > #text {'+'animation-name: slidedown2;'+
 ' animation-direction: reverse;'+
  'animation-fill-mode: forwards;'+
  'animation-duration: .5s;'+'}'+'-@webkit-keyframes slidedown2'+'{'+'from{transform: translate(-50%,-50%);}'+'to{transform: translate(-50%,-467%);}'+'}');
  cssAnimation.appendChild(rules);
  document.getElementsByTagName("head")[0].appendChild(cssAnimation);
}
</script>

动画中幻灯片的 CSS：

#overlayytb {

  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);  /*Black background with opacity */
  z-index: 2; 
  cursor: pointer; 

}

#text{
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  top: 50%;
  left: 50%;
  font-size: 50px;
  letter-spacing: 0px;
  color: white;
  transform: translate(-50%,-50%);
  /*-ms-transform: translate(-50%,-50%);*/
  animation-name: slidedown;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-duration: .5s;
  animation-direction: normal;
}

@-webkit-keyframes slidedown
{
    0%
    {
        transform: translate(-50%,-467%);
    }
    100%
    {
        top:50%;
        transform: translate(-50%,-50%);
    }
}

标签： javascripthtmlcss

解决方案

我想通了，我使用 jQuery animate 函数用于带有边距和不透明度参数的过渡幻灯片，然后对于淡出选项，我使用 javascript 在单击具有单击功能的按钮时将不透明度设置为 0。谢谢克拉维米尔 :)

推荐阅读