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

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

我添加.card .card-reveal {}来更改extra class属性，使顶部卡片内容成为拉下来揭示更多信息的窗帘*

以下是工作代码

注意：同时将transform添加到display: block以修复演示中的.card .card-image img。

＆＃13;

bottom gap

＆＃13;

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

＆＃13;

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

＆＃13;

这是工作codepen

是否可以在Materialisecss上保留卡片显示的方向？

1 个答案: