文章/答案/技术大牛

发布

社区首页 >问答首页 >织物反应与CSS变换translateX

问织物反应与CSS变换translateX
EN

Stack Overflow用户

提问于 2019-10-24 08:32:18

回答 1查看 114关注 0票数 0

我注意到了Microsoft织物反应的奇怪行为。当使用CSS悬停和transform: translateX()相结合将按钮移动到视图中时，问题就会发生，并且这个按钮会创建一个织物面板。问题是:当面板关闭时，悬停状态似乎被恢复(通过织物反应？)，尽管鼠标早已移出悬停区域。

查看这个CodePen，它分离并复制问题。

作为截图：

禁止悬停：

悬停：

从面板返回后(鼠标在悬停区域外)：

我希望最后一张截图和第一张截图完全一样，但我不知道到底出了什么问题。所以我的问题是:是什么搅乱了悬停效应？

注意:我创建了另一个片段，它也创建一个覆盖，但不使用织物的面板。问题不在那里发生。那么它是织物反应中的一个缺陷吗？

reactjs

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-24 11:02:39

我认为问题有以下几点：

当Fabric React关闭覆盖时，它将恢复面板打开前活动的HTML元素的焦点。这种行为被深埋在织物代码*中。我想，一般来说，这样做是正确的。但是，当焦点按钮由于悬停效应而可见时，浏览器很难聚焦它。它可以通过在$("#open-button").focus()的JS控制台中输入提供Codepen来再现。

我的解决方案是:在点击按钮之前和打开面板之前窃取按钮的焦点：

const activeElement = document.activeElement as HTMLElement;
activeElement && activeElement.blur && activeElement.blur();

只有这样：

this.setState({ show: true });

*差异，这将禁用设置焦点时，回来(但这肯定不是你想要的！我添加这个片段只是为了显示这种行为集成得有多好)：

    diff --git "a/office-ui-fabric-react.umd.pretty.js" "b/office-ui-fabric-react.umd.pretty.js"
    index 28df7f6b..d1ca320d 100644
    --- "a/office-ui-fabric-react.umd.pretty.js"
    +++ "b/office-ui-fabric-react.umd.pretty.js"
    @@ -4537,7 +4537,7 @@ and limitations under the License.
                     Or = e;
                     var t = ie(e);
                     t && t.requestAnimationFrame(function () {
    -                    Or && Or.focus(), Or = void 0
                     })
                 }
             }
    @@ -24254,6 +24254,7 @@ and limitations under the License.
                         return v.createElement(Cl, m({}, b), v.createElement(Xa, {
                             role: "dialog",
                             "aria-modal": "true",
    +                        shouldRestoreFocus: false,
                             ariaLabelledBy: j ? W : void 0,
                             onDismiss: this.dismiss,
                             className: Y.hiddenPanel

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58537306

复制

相似问题

问织物反应与CSS变换translateX
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问织物反应与CSS变换translateXEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问织物反应与CSS变换translateX
EN