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

【问题标题】：Sliding up and sliding down overlay on button click problem javascript, css在按钮单击问题javascript，css上向上滑动和向下滑动覆盖
【发布时间】：2019-10-18 01:05:12
【问题描述】：

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

我尝试使用这篇文章制作从中心到顶部的过渡，滑出过渡以放入与我的 onClick="myFunction" 参数匹配的 JavaScript 代码：Set the webkit-keyframes from/to parameter with JavaScript。这是我的代码：

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

【问题讨论】：

您想使用 CSS3 动画而不是 CSS3 过渡是否有特殊原因？ developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/…
不，我使用 css3 动画而不是 css3 过渡没有任何特别的原因。虽然您认为在我的情况下使用它是否实用，或者更容易获得我正在寻找的效果？
当您从一种特定状态转到另一种状态时，过渡是最佳选择。

标签： javascript html css

【解决方案1】：

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

【讨论】：