动画固定元素答案

【问题标题】：Animating a fixed element动画固定元素
【发布时间】：2022-02-23 09:28:44
【问题描述】：

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

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

动画应该需要 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
    }
  }
}

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

干杯，

亚历克斯

【问题讨论】：

position 属性不能动画或过渡，因为它不是基于数字的。您将需要一个替代方案......可能是 JS。
但是元素需要修复。
那你有问题了。您不能为 position 属性设置动画，需要替代解决方案。也许使用absolute 并在动画完成后切换到fixed（使用JS）。
好的，感谢您提醒我有关 Paulie_D 的问题，我告诉了我认识的几个开发人员，他们也很震惊，哈哈。我将暂时离开它，它不是我的应用程序的重要组成部分

标签： javascript html css sass ejs

【解决方案1】：

以下解决方案对我有用：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，反之亦然，以便上下滑动。

【讨论】：