javascript - 通过单击卡片/磁贴在 HTML、CSS、JS 中滑动底部面板

Question

我是初学者，正在尝试通过单击操作从页面滑动底部显示卡片/图 block 的详细信息。我已经找到了符合我要求的模板之一，并尝试进行自定义。我发现很少有关于如何从底部进行滑动效果的代码示例。我能够找到解决方案，但它适用于悬停操作，我正在尝试执行以下操作。

场景: 如模型屏幕截图所示 >> 卡片将显示在主屏幕中 >> 用户点击其中一张卡片 >> 背景应该透明 50% 并且电影详细信息应该显示在滑动按钮面板中 >> 立即播放应该处于事件状态

就像下面给定模板中的左侧菜单加载 - playdo 模板

我发现的一个类似示例是这个，但正如我提到的，这是悬停功能 - Sliding bottom panel through HTML, CSS and JS

另一个从顶部滑动 - http://hoveralls.design-way.ro/

我正在使用的屏幕截图中的模板是 - https://github.com/tomclaus/playdo

Answer 1

大家好，欢迎来到前端世界。

您需要做的是创建两个不同的 css 类，其中包含您要更改的内容(在本例中为顶部和透明度)。一种用于您的卡片/图 block “最小化”时，一种用于“最大化”时。

.minimized{
    background-color: rgba(255,255,255, 0.5);
    top: 90%;
}

.maximized{
    background-color: rgba(255,255,255, 1);
    top: 75%;
}

然后使用 jQuery 或 Javascript 将点击事件应用于您的卡片/标题，并交换这些类以提供正确的行为。

$("#card").click(function(){
    if($(this).hasClass('minimized')){

        $(this).removeClass('minimized');
        $(this).addClass('maximized');
    }
    else{

        $(this).removeClass('maximized');
        $(this).addClass('minimized');
    }
});

确保您的卡片/磁贴的 CSS 包含以下内容:

-webkit-transition: all ease 1s;

当您交换最小化和最大化类时，该行将提供平滑过渡。

请查看this jsfiddle查看运行中的代码。

附言。由于我使用“-webkit-”前缀进行转换，因此此示例仅适用于 webkit 浏览器(safari 和 chrome)