gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 16:41:51 27 4
gpt4 key购买 nike

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

对于我的申请,我已经移动了 <div class="card-content">到顶部看起来像这样:https://codepen.io/anon/pen/YaqYOj

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

谢谢

最佳答案

您可以通过更改此元素 .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

关于javascript - 是否可以在 Materializecss 上保留 card-reveal 的方向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49289250/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com