时间戳

首页 > 解决方案 > 动画固定元素

javascript - 动画固定元素

问题描述

我正在尝试在我的表单中添加一个上滑动画，但到目前为止我还没有运气。

基本上点击一个按钮，表单就会出现，表单固定在屏幕的中心，向用户显示内容。然而，在过去的几天里，我一直在尝试添加一个非常简单的幻灯片动画。

动画应该需要 1 秒，并且表单应该向上滑动到设备可用的最大高度，但正如我之前提到的，目前还没有运气。

我确实在表单上尝试了一个简单的不透明动画，但它没有被修复并且它有效，这表明固定元素导致了问题，但我不确定这是否是问题的全部范围。

下面我将提供我用于表单的标记，包括 HTML（EJS 模板）和 CSS（SCSS）。

<!-- HTML Markup -->
<div id="modal-form">
  <span aria-hidden="true" id="close"><i class="fas fa-times"></i> </span>
  <div class="modal-content" role="document">
    <div class="modal-header">
      <h3> <%= campground.name %><span></span> Enquiry Form</h3>
    </div> 
    <div class="modal-body">
          <% include ../partials/enquiry-form %>
      </div>
  </div>
</div>

//Styling for the form
#modal-form {
  @include position(fixed,0,0,0,0); //position, left, right, bottom, top
  background-color: $white; 
  z-index: 2;
  visibility: hidden;
  @include flex(column, center, center); //Flex by default, flex-direction, justify-content, align-items
  width: 100%;

  //Close button
  #close {
    @include position(absolute,0,null,null,0); //position, left, right, bottom, top
    @include border-radius(100%);
    margin: 10px;
    padding: 3px 8px;
    i {
      font-size: 2rem;
      &:hover {
        cursor: pointer;
      }
    }
  }

  .modal-content {
    position: relative;
    @include flex(column, null, null); //Flex by default, flex-directio, justify-content, align-items
    width: 80vw;  
    margin-top: 50px;
    .modal-header {
      @include flex(column, center, center); //Flex by default, flex-direction, justify-content, align-item
    }

    h3 {
      font-weight: $font-weight-normal;
      font-size: $h3-size;
    }

    .modal-body {
      @include flex(null, center, null); //Flex by default, flex-direction, justify-content, align-items
    }
  }
}

我希望有人能帮我解决这个简单的问题，这是我第一次尝试做动画，我觉得它适合这种形式。它看起来相对但显然不适合我的场景。

干杯，

亚历克斯

标签： javascripthtmlcsssassejs

解决方案

以下解决方案对我有用：http ://www.java2s.com/example/html-css/css-animation/use-animations-to-slide-a-fixed-position-element-from-the-bottom-of -th.html

它的要点是，不是使用转换，而是在 CSS 中将元素的起点设置为底部：0，并且动画关键帧应该使用固定元素的位置。所以它可以从底部：100% 到底部：0，反之亦然，以便上下滑动。

推荐阅读