Question

我正在尝试向表单中添加幻灯片动画，但是到目前为止我还没有运气。

基本上，单击按钮即可显示该表单，该表单固定在屏幕中央以向用户显示内容。但是，在过去的几天中，我一直在尝试添加非常简单的幻灯片动画。

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

我确实在表单上尝试了一个简单的不透明动画，但没有将其修复，但仍能正常工作，这表明fixed元素正在引起问题，但我不确定这是否是问题的全部范围。

下面，我将提供用于表单的标记，其中包括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
    }
  }
}

我希望有人可以帮助我解决这个简单的问题，这是我第一次尝试制作动画，我觉得这种形式很合适。它看起来相对，但显然不适合我的情况。

干杯

亚历克斯

动画固定元素

0 个答案: