Javascript 设置固定元素的动画

我正试图在我的表单中添加一个幻灯片动画，但到目前为止我还没有成功

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

动画应该需要1秒，窗体应该向上滑动到设备可用的最大高度，但正如我前面提到的，到目前为止没有运气

我在表单上尝试了一个简单的不透明度动画，但没有进行修复，效果良好，这表明修复的元素导致了问题，但我不确定这是否是问题的全部范围

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

查询表格
//窗体的样式设置
#情态形式{
@包含位置（固定，0,0,0,0）；//位置，左，右，下，上
背景色：$白色；
z指数：2；
可见性：隐藏；
@包括柔性（柱、中心、中心）；//默认情况下柔性、柔性方向、对齐内容、对齐项目
宽度：100%；
//关闭按钮
#接近{
@包含位置（绝对，0，null，null，0）；//位置，左，右，下，上
@包括边界半径（100%）；
利润率：10px；
填充：3px8px；
我{
字号：2rem；
&：悬停{
光标：指针；
}
}
}
.模态内容{
位置：相对位置；
@include flex（column，null，null）；//默认情况下flex，flex directio，对齐内容，对齐项目
宽度：80vw；
边缘顶部：50px；
.模态标题{
@包括柔性（柱、中心、中心）；//默认情况下柔性、柔性方向、对齐内容、对齐项目
}
h3{
字体重量：$font-weight-normal；
字体大小：$h3大小；
}
.模态体{
@include flex（null，center，null）；//默认情况下flex，flex方向，对齐内容，对齐项目
}
}
}

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

干杯

---

Alex

position属性不能设置动画或转换，因为它不是基于数字的。您将需要一个替代方案…可能是JS。但该元素需要修复。然后您就有问题了。无法设置

位置

属性的动画，需要其他解决方案。也许在动画完成后使用

absolute

并切换到

fixed

（使用JS）。好的，谢谢你提醒我这个问题，Paulie_D，我告诉了一些我知道的开发人员，他们也很震惊lol。我将暂时离开它，它不是我应用程序的重要部分

<!-- 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
    }
  }
}