CSS непрозрачность перехода - PullRequest
Новая
       0

CSS непрозрачность перехода

0 голосов
/ 12 февраля 2020

использовал следующее как основу для того, что я здесь делаю: https://codepen.io/plavookac/pen/qomrMw

Я пытаюсь заставить движение изменить непрозрачность, но это не так. t покрыты стандартными маркерами перехода. 

.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, но не уверен, что требуется. Любые указатели будут оценены.

Ответы [ 2 ]

0 голосов
/ 12 февраля 2020

Если вы хотите передать 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>
0 голосов
/ 12 февраля 2020

На самом деле он покрыт стандартными маркерами перехода:

В вашем #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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...