CSS 不透明度过渡

Question

使用以下内容作为我在这里所做的事情的基础：https://codepen.io/plavookac/pen/qomrMw

我也在尝试让运动改变不透明度，但是标准过渡标记没有涵盖这一点。

.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 4em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
margin-top: 0px;
transform: translateY(-80px);
transition: opacity 350ms ease-in-out;
transition: transform 350ms ease-in-out;
z-index: 1;
position: relative;
opacity: 0.7;

}
.sidebarMenuInner{
position: relative;
margin:0;
padding:0;
top: 30px;
right: -40px;
width: 150px;
background: linear-gradient(0deg, #bee 00%, #bbe 100%);
border-top: px solid rgba(255, 255, 255, 0.10);
border-left: px solid rgba(0, 0, 0, 1);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.spinnerContainer {
position: relative;
height: 100%;
width: 100%;
top: 30px;
left: 20px;
height: 22px;
width: 22px;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: relative;
z-index: 99;
height: 100%;
width: 100%;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #000;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}

<nav class="navbar navbar-light custom-navbar" >
<div class="container">


<div class="spinnerContainer" >
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" >
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1" ></div>
<div class="spinner horizontal" ></div>
<div class="spinner diagonal part-2" ></div>
</label>

<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li><a href="./index.html" target="_blank">Line 1</a></li>
<li><a href="./index.html" target="_blank">Line 2</a></li>
<li><a href="./index.html" target="_blank">Line 3</a></li>
<li><a  href="./index.html" target="_blank">Line 4</a></li>
</ul>
</div>
</div> 
</div>
<br>
</nav>

这里的机械工程师，所以只是试图将足够的 html 放在一起以形成一个投资组合 - 我试图削减 CSS/html，但不确定需要什么。任何指示将不胜感激。

Answer 1

它实际上被标准过渡标记所覆盖：

在您的#sidebarMenu中，链过渡不是用两条线分隔它们，而是添加不透明度 0 作为初始状态;

#sidebarMenu {
transition: transform 250ms ease-in-out, opacity 350ms ease-in-out;
opacity: 0;
}

切换菜单状态后，将其更改为opacity: 1

input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
opacity: 1;
}

Answer 2

如果要转换 2(或更多(属性，则应用逗号分隔它们。否则，transition的第一个声明将被第二个声明覆盖。

.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 4em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
margin-top: 0px;
transform: translateY(-80px);
transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
z-index: 1;
position: relative;
opacity: 0.7;
}
.sidebarMenuInner {
position: relative;
margin: 0;
padding: 0;
top: 30px;
right: -40px;
width: 150px;
background: linear-gradient(0deg, #bee 00%, #bbe 100%);
border-top: px solid rgba(255, 255, 255, 0.10);
border-left: px solid rgba(0, 0, 0, 1);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
opacity: 1;
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.spinnerContainer {
position: relative;
height: 100%;
width: 100%;
top: 30px;
left: 20px;
height: 22px;
width: 22px;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: relative;
z-index: 99;
height: 100%;
width: 100%;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #000;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}

<nav class="navbar navbar-light custom-navbar">
<div class="container">
<div class="spinnerContainer">
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1" ></div>
<div class="spinner horizontal" ></div>
<div class="spinner diagonal part-2" ></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li><a href="./index.html" target="_blank">Line 1</a></li>
<li><a href="./index.html" target="_blank">Line 2</a></li>
<li><a href="./index.html" target="_blank">Line 3</a></li>
<li><a href="./index.html" target="_blank">Line 4</a></li>
</ul>
</div>
</div>
</div>
<br>
</nav>