gpt4 book ai didi

css - 防止 CSS 转换影响 child

转载 作者:行者123 更新时间:2023-11-28 10:09:50 26 4
gpt4 key购买 nike

我正在尝试将 CSS transform 属性应用于两个元素(父元素和子元素)但问题是当我将 transform 添加到父元素时它会影响子元素定位。

一个例子:

$('.dropdownToggler').click(function() {
$('.dropdown').toggleClass('-isOpen')
});

$('.test').click(function() {
$('.topbar').toggleClass('transform');
});
* {
box-sizing: border-box;
}

.topbar {
position: fixed;
height: 45px;
background: #333;
top: 0;
right: 0;
left: 0;
padding: 12px;
color: #fff;
/* remove comment below */
/*transform: translateY(0);*/
}

.topbar.transform {
transform: translateY(0);
}

.dropdown {
background: #ddd;
height: 100%;
position: fixed;
top: 45px;
right: 0;
left: 0;
color: #333;
/* main styles */
transform: translateY(100%);
transition: transform 300ms ease-in-out;
will-change: transform;
}

.dropdown.-isOpen {
transform: translateY(0%);
}

.test {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<div class="topbar">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<button class="dropdownToggler">Open Menu</button>
<button class="test">toggle `transform` to parent</button>
<div class="dropdown">Notifications</div>
</div>

</body>

</html>

当您将 transform: translateY(0); 添加到顶部栏(父级)时,通知面板(子级)将基于父级定位。我正试图阻止这种行为。

为了更流畅的动画,我使用了transform,当然我们也可以使用CSS top。有什么建议吗?感谢您抽出时间。

最佳答案

您可以以视口(viewport)单位设置 .dropdown 的高度(100vh - topbar 的高度)

例子:

$('.dropdownToggler').click(function() {
$('.dropdown').toggleClass('-isOpen')
});

$('.test').click(function() {
$('.topbar').toggleClass('transform');
});
* {
box-sizing: border-box;
}

.topbar {
position: fixed;
height: 45px;
background: #333;
top: 0;
right: 0;
left: 0;
padding: 12px;
color: #fff;
/* remove comment below */
/*transform: translateY(0);*/
}

.topbar.transform {
transform: translateY(0);
}

.dropdown {
background: #ddd;
height: calc(100vh - 45px);
position: fixed;
top: 45px;
right: 0;
left: 0;
color: #333;
/* main styles */
transform: translateY(100%);
transition: transform 300ms ease-in-out;
will-change: transform;
}

.dropdown.-isOpen {
transform: translateY(0%);
}

.test {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<div class="topbar">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<button class="dropdownToggler">Open Menu</button>
<button class="test">toggle `transform` to parent</button>
<div class="dropdown">Notifications</div>
</div>

</body>

</html>

关于css - 防止 CSS 转换影响 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50484337/

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