Question

我正在尝试打开从上到下下垂的物化模式，与 this fiddle 完全相同，但从上到下反转。不幸的是，在物化模式上修改某些内容非常困难，因为某些css属性已经从materialize js添加。从底部到顶部的特殊效果由“底页”类添加，但“顶页”类不存在。

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

那么如何修改要反转的开放效果以及从上到下开启的模态？

Answer 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规则

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

Answer 2

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

尝试Fiddle

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

Answer 3

就像@Rohan Kumar所说，物化确实可以让你以某种方式修改模态的行为。您可以在此处查看：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
    }
  );
});

Answer 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：查找和编辑＆＃34;底部动画片＆＃34;如下

在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);
}

物化模式从上到下打开

4 个答案: