javascript - 是否可以在 Materializecss 上保留 card-reveal 的方向？

Question

我正在查看此处显示的 materializecss 框架的卡片显示组件: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 属性，使top card-content 是一个下拉显示更多信息的窗帘*

这是工作代码

Note: Also add display: block to .card .card-image img fix the bottom gap in your demo.

$('.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