用CSS转场隐藏屏幕外的元素

Hiding elements offscreen with CSS transitions

本文关键字：元素 屏幕 隐藏 CSS      更新时间：2023-09-26

我正在制作一个web应用程序，其中包含一个隐藏的侧边栏，从右侧移动出现。实现这一点的最明显的方法是将侧边栏隐藏在屏幕外，overflow: hidden;在父元素上，并使用css过渡来动画right属性，以便当用户按下按钮时它出现。

然而，我发现的是，即使overflow: hidden;禁用滚动条，用户也可以通过使用Ctrl+F或tab到侧边栏上的元素来滚动父元素到侧边栏，而它应该隐藏在屏幕外，在此过程中推动一些主应用程序。

下面是我做的一个JSFiddle来演示这个问题。

虽然这不是一个特别大的问题(它可以通过再次切换侧边栏来修复)，但这显然是不可取的，我还没有找到一个好的方法来处理它。

我可以使用javascript来监听transitionend事件，将visibility设置为hidden在侧边栏上，这样当侧边栏被隐藏时，文本不能被选中，但用户仍然能够在过渡发生时做到这一点，无论如何滚动屏幕。

我也可以把所有的文本放在伪元素中，并在所有可聚焦的元素上添加tabindex="-1"，这样就没有什么是可选择的，但这看起来太过分了，也很混乱，不允许用户在侧边栏上的元素可见时按Ctrl+F或tab键，这是不希望的。

我也可以让侧边栏出现在左边而不是右边，但我宁愿先看看是否有更好的方法来做到这一点，而不是改变整个应用程序的设计。

如果这已经在其他地方解决了，我很抱歉，但我已经搜索了周围，没有发现任何与我的问题有关的东西。

一种解决方案是将#Sidebar position设置为fixed。并将right替换为transform: translateX()以隐藏/显示它。

JSFiddle链接

这是一个有趣的案例，我没有听说过或想过，说'错误'确实有意义。我猜问题在于文本是在屏幕外隐藏的，但仍然存在。我会将该div设置为display:none，然后通过javascript切换更改此值，使div变为:display:inline，然后拔出。

你可以检查元素是否在viewport之外，然后在其上显示:none

这个问题将帮助检查元素是否在viewport之外

使用另一个具有属性display: none;->这样你就不能tab到它/ctrl+F它。

CSS: 

#Sidebar {
    ...
    display: none;
}
#Sidebar.block {
    display: block;
}
Javascript: 

if (sidebar.classList.contains("open")) {
    sidebar.classList.remove("open");
    setTimeout(function() {
        sidebar.classList.remove("block");
    }, 3500); // consider faster transitions!
} else {
    sidebar.classList.add("block");
    setTimeout(function() {
        sidebar.classList.add("open");
    }, 50);
}

小提琴在这里:https://jsfiddle.net/j9d0e7ug/2/

注意我使用了setTimeout()，否则在block和none之间改变显示会破坏动画。还要考虑更快的转场:)

相关文章：