尝试根据子 CSS 选择器(动态添加/删除)的存在在屏幕上移动屏幕外面板。
我做错了什么？时间差
场景:
屏幕外面板 .details 带有监视子选择器 .finished-loading 的 CSS 规则。当子选择器存在时(通过最终用户交互动态加载)，面板的 CSS 规则变为真，.details 面板在屏幕上滑动。
示例::
CSS:
body .details {margin-right: -300px;} /* .details panel is closed */
body.show-details .details .finished-loading {margin-right: 0;} /* conditions on opening the .details panel */
HTML:
<body class=".show-details">
<div class="wrapper">
<div class="details">
<!-- any number of nested elements -->
<div>
<div>
<p>Dynamically loaded content</p>
<p class="finished-loading">Dynamically loaded content</p> <!-- .finished-loading triggers CSS rule -->
</div>
</div>
</div>
</div>
</body>
最佳答案
这么多错误...
在details div 或body 添加控制边距的类
不要使用边距，使用转换 - 它是在 html 引擎完成定位/布局后处理的，如果您使用转换，将会产生更好的动画。
类名的任何位置都不能有点
<body>
<div class="wrapper">
<div class="details finished-loading">
<!-- any number of nested elements -->
<div>
<div>
<p>Dynamically loaded content</p>
<p>Dynamically loaded content</p>
</div>
</div>
</div>
</div>
</body>
.details {transition: transform .5s ease;}
.details:not(.finished-loading) {transform: translateX(300px);}
例子中使用了否定伪类(:not)，这样代码会短一些。你也可以这样做，更容易理解，但代码更多:
.details {transition: transform .5s ease;transform: translateX(300px);}
.details.finished-loading {transform: translateX(0);}
编辑:
一些解释，为什么需要将类添加到详细信息 div 或正文中:
目前无法通过子约束选择元素(除了 :empty)。
关于html - 当存在远程子类时，CSS 能否检测并移动 HTML 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58782091/