从上到下打开物化模态答案

【问题标题】：materialize modal open from top to bottom从上到下打开物化模态
【发布时间】：2017-03-21 12:50:51
【问题描述】：

我正在尝试打开从上到下下垂的物化模态，就像在 this fiddle 中一样，但从上到下反转。不幸的是，很难在物化模式上修改一些东西，因为一些 css 属性是从物化 js 添加的。从下到上的特效是由“bottom-sheet”类添加的，但没有“top-sheet”类。

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

那么如何修改打开效果反转和模态从上到下打开呢？

【问题讨论】：

标签： javascript jquery css materialize

【解决方案1】：

我知道这个解决方案太老套了，但至少它有效。

.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;
}

https://jsfiddle.net/xmz0afhf/1/

原理：

将“bottom”属性设置为“auto !important”
覆盖转换属性以包含“top”
应用显示道具不是“无”且“不透明度”道具不是“0”时应用的 css 规则

编辑：已更新，因此您可以分别使用底页和顶页

【讨论】：

非常好，如果你想使用那个“.bottom-sheet”类，问题可能是……因为你正在覆盖类的默认属性。添加另一个像 .top-sheet 这样的类来做所有这些事情会很酷。
更新：您现在可以同时使用两者

【解决方案2】：

Materialize Modal 默认情况下使用缩放模式对话框提供从上到下的效果。如果你想要从上到下的滑动功能，那么你可以使用简单的$.slideToggle()。但是如果你想修改 Materialize JS 那么你可以尝试Fiddle 使用下面的代码，

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

【讨论】：

唯一的问题似乎是在打开时调整到 100% 宽度：|

【解决方案3】：

就像@Rohan Kumar 所说，materialize 确实让您有可能以某种方式修改模态的行为。你可以在这里查看：materialize modal options

这是我在 Fiddler 上得到的：https://jsfiddle.net/7f6hmgcf/25/

$(document).ready(function() {
$('.modal').modal({
  dismissible: true, // Modal can be dismissed by clicking outside of the modal
  opacity: .5, // Opacity of modal background
  inDuration: 300, // Transition in duration
  outDuration: 200, // Transition out duration
  startingTop: '-10%', // Starting top style attribute
  endingTop: '10px', // <-- HEIGHT OF THE BUTTON
  ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
    console.log(modal, trigger);
  },
  complete: function() { alert('Closed'); } // Callback for Modal close
    }
  );
});

【讨论】：

【解决方案4】：

如果你想使用原生方式添加顶层模态，那么编辑你的具体化文件如下：

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() 函数中编辑

// Bottom sheet animation
if (this.$el[0].classList.contains('bottom-sheet')) {
   Vel(this.$el[0], { bottom: '-100%', opacity: 0 }, exitVelocityOptions);
}else if (this.$el[0].classList.contains('top-sheet')) {
   Vel(this.$el[0], { top: '-100%', opacity: 0 }, exitVelocityOptions);
}

在 animateOut() 函数中编辑

// Bottom sheet animation
if (this.$el[0].classList.contains('bottom-sheet')) {
   Vel(this.$el[0], { bottom: 0, opacity: 1 }, enterVelocityOptions);
}else if (this.$el[0].classList.contains('top-sheet')) {
    Vel(this.$el[0], { top: 0, opacity: 1 }, enterVelocityOptions);
}

【讨论】：