是否可以在 Materialise Css 上反转卡片显示的方向？

Question

我正在查看这里显示的 materializecss 框架的 card-reveal 组件：https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ 官方文档在这里：http://next.materializecss.com/cards.html

对于我的应用程序，我已将 <div class="card-content"> 移至顶部，如下所示：https://codepen.io/anon/pen/YaqYOj

所以我想知道是否可以让卡片显示动画从上到下进行，就像顶部卡片内容是拉下以显示更多信息的窗帘一样。

谢谢

Answer 1

您可以通过更改此元素.card .card-reveal {} 的transform 属性来实现此目的。

我添加extra class 来更改transform 属性使顶部卡片内容是一个拉下以显示更多信息的窗帘*

这是工作代码

注意：还要将display: block 添加到.card .card-image img，在您的演示中修复bottom gap。

$('.card-content').click(()=>{
  $('.card-reveal').addClass('card-closing');
});

$('.card-reveal .card-title-custom').click(()=>{
  $('.card-reveal').removeClass('card-closing');
});

.main {
  width: 450px;
  margin: 30px;
}
.card .card-image img {
    border-radius: 2px 2px 0 0;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: block;
}
.card .card-reveal {
    padding: 20px;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    top: 100%;
    height: 100%;
    z-index: 1;
    display: block !important;
    transform: translateY(-200%) !important;
    transition: transform .6s;
    will-change: opacity, transform;
}
.card .card-reveal.card-closing {
    transform: translateY(-100%) !important;
    display: block !important;
}
.grey-text.text-darken-4 {
    display: block;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
    
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="main">
<div class="card">
      <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator-custom" src="http://materializecss.com/images/office.jpg">
    </div>

    <div class="card-reveal">
      <span class="card-title-custom grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p>Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>
</div>

这是工作的codepen