Javascript 实现从上到下的开放模式

我试图从上到下打开materialize模式下垂，就像在中一样，但从上到下反转。不幸的是，很难在materialize模式上修改某些内容，因为一些css属性是从materialize js添加的。 “底部板材”类添加了从下到上的特殊效果，但不存在“顶部板材”类

.modal.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity;
}

因此，如何修改要反转的打开效果和要从上到下打开的模式？

默认情况下，使用“缩放模式”对话框提供从上到下的效果。如果您想要从上到下的滑动功能，那么可以使用simple。但是如果你想修改Materialize JS，你可以尝试下面的代码

$(document).ready(function() {
    $('#modal1').modal({
      startingTop: '0', // Starting top style attribute
      endingTop: '10%', // Ending top style attribute
    });
});

默认情况下，使用“缩放模式”对话框提供从上到下的效果。如果您想要从上到下的滑动功能，那么可以使用simple。但是如果你想修改Materialize JS，你可以尝试下面的代码

$(document).ready(function() {
    $('#modal1').modal({
      startingTop: '0', // Starting top style attribute
      endingTop: '10%', // Ending top style attribute
    });
});

---

我知道这个解决方案很老套，但至少它是可行的

.modal.top-sheet {
  top: 0% !important;
  bottom: auto !important;
  transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .2s;
  will-change: transform;
  transform: translate(0, -100%) scale(1) !important;
  width: 100%;
  opacity: 1 !important;
}

.modal.top-sheet.open {
   transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .35s .25s;
}

.modal.top-sheet.open:not([style*="display: none"]):not([style*="opacity: 0;"]) {
  transform: translate(0, 0%) !important;
}

原则是：

将“底部”属性设置为“自动！重要”

覆盖转换属性以包括“顶部”

应用当显示属性不是“无”且“不透明度”属性不是“0”时应用的css规则

---

编辑：已更新，以便您可以分别使用底部工作表和顶部工作表

我知道此解决方案非常粗糙，但至少它可以工作

.modal.top-sheet {
  top: 0% !important;
  bottom: auto !important;
  transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .2s;
  will-change: transform;
  transform: translate(0, -100%) scale(1) !important;
  width: 100%;
  opacity: 1 !important;
}

.modal.top-sheet.open {
   transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .35s .25s;
}

.modal.top-sheet.open:not([style*="display: none"]):not([style*="opacity: 0;"]) {
  transform: translate(0, 0%) !important;
}

原则是：

将“底部”属性设置为“自动！重要”

覆盖转换属性以包括“顶部”

应用当显示属性不是“无”且“不透明度”属性不是“0”时应用的css规则

---

编辑：进行了更新，以便您可以分别使用底页和顶页

正如@Rohan Kumar所说，materialize确实为您提供了以某种方式修改模态行为的可能性。您可以在这里查看：

这是我在Fiddler身上得到的：

$（文档）.ready（函数（）{
$（'.modal'）.modal({
dismissible:true，//可以通过单击模态外部来解除模态
不透明度：.5，//模式背景的不透明度
硬化：300，//持续时间的过渡
outDuration:200，//转换输出持续时间
startingTop:“-10%”，//正在启动top样式属性
endingTop:'10px'，//就像@Rohan Kumar所说的，materialize确实让你有可能以某种方式修改模态的行为。你可以在这里检查它：

这是我在Fiddler身上得到的：

$（文档）.ready（函数（）{
$（'.modal'）.modal({
dismissible:true，//可以通过单击模态外部来解除模态
不透明度：.5，//模式背景的不透明度
硬化：300，//持续时间的过渡
outDuration:200，//转换输出持续时间
startingTop:“-10%”，//正在启动top样式属性
endingTop:'10px'，//如果要使用本机方式添加顶部图纸模式，请按以下方式编辑具体化文件：

materialize.css:将此样式添加到css文件中

 .modal.top-sheet {
      top: -100%;
      bottom: auto;
      margin: 0;
      width: 100%;
      max-height: 45%;
      border-radius: 0;
      will-change: top, opacity;
    }

materialize.js:
查找并编辑“底部工作表动画”，如下所示

在animateIn（）函数中编辑

在animateOut（）函数中编辑

如果要使用本机方式添加顶部图纸模式，请按以下方式编辑具体化文件：

materialize.css:将此样式添加到css文件中

 .modal.top-sheet {
      top: -100%;
      bottom: auto;
      margin: 0;
      width: 100%;
      max-height: 45%;
      border-radius: 0;
      will-change: top, opacity;
    }

materialize.js:
查找并编辑“底部工作表动画”，如下所示

在animateIn（）函数中编辑

在animateOut（）函数中编辑

唯一的问题似乎是在打开时调整到100%宽度：|唯一的问题似乎是在打开时调整到100%宽度：|很好，如果你想使用它，可能会出现问题。。下表分类方式…因为您正在覆盖类的默认属性。添加另一个类（如.top sheet）将非常酷，它将完成所有这些工作。更新：您现在可以同时使用这两个。非常好，如果您想使用“.bottom sheet”，可能会出问题类如何…因为您正在覆盖类的默认属性。添加另一个类（如.top sheet）将非常酷，它将完成所有这些工作。更新：您现在可以同时使用这两个类