CSS转型

Question

我需要帮助我试图在汉堡菜单上检查和取消选中动画。我能够动画菜单，但我无法弄清楚如何在转换为0

时动画左菜单动画

&__menu {
   transform: translateX(-100%);
   transition: 1s ease-in-out;
// .c-hamburger--icon ~ &{
//     transition: all 300ms;
// }
   .c-hamburger--icon:checked ~ &{
     height: 100vh;
     background: #000;
     width: 270px;
     transform: translateX(0);

     top: 0;
     opacity: .7;
     position: fixed;
   }
}

这是CodePen Demo。

Answer 1

将height和width属性应用于元素的默认状态，而不是仅在选中菜单后应用它。 height和width属性的默认值为auto和we cannot transition from or to auto。因此，它导致立即隐藏菜单而不是缓慢的过渡。

当您使用transform: translateX(-100%)初始隐藏菜单时，即使为元素设置默认高度和宽度也不会影响布局。下面添加了编译CSS的演示。

&__menu {
   position: fixed;
   top: 0;
   height: 100vh;
   width: 270px;
   transform: translateX(-100%);
   transition: 1s ease-in-out;
   .c-hamburger--icon:checked ~ &{
     background: #000;
     transform: translateX(0);
     opacity: .7;
   }
}

需要注意的另一件事是position属性也应该在默认状态下设置。这是必需的，因为position不是可转换的属性。

@import url("https://fonts.googleapis.com/css?family=Titillium+Web");
 * {
  padding: 0;
  margin: 0;
  font-size: medium;
  font-family: 'Titillium Web', sans-serif;
}
.l-app__menu {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 270px;
  transform: translateX(-100%);
  transition: 1s ease-in-out;
}
.c-hamburger--icon:checked ~ .l-app__menu {
  transform: translateX(0);
  background: #000;
  opacity: .7;
}
.l-app__left {
  float: left;
  position: fixed;
  background: #185a9d;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 1200px) {
  .l-app__left {
    position: static;
    width: 100%;
    height: 100vh;
    background: #fff;
  }
}
.l-app__right {
  float: right;
  background: #fff;
  width: 50%;
  height: 100vh;
}
@media (max-width: 1200px) {
  .l-app__right {
    position: static;
    width: 100%;
    background: #bfbfbf;
  }
}
.l-app__right--inner {
  padding: 50px;
}
.l-app__hamburger {
  position: fixed;
  z-index: 1;
}
.c-bike__image {
  background: url(http://bikeshopgirl.com/wp-content/uploads/2011/10/15038.jpg) no-repeat;
  background-size: contain;
  min-height: 100%;
  opacity: .9;
  top: 0;
  position: relative;
}
@media (max-width: 1200px) {
  .c-bike__image {
    position: static;
    width: auto;
    opacity: 1;
  }
}
.c-bike__header {
  font-size: 150%;
  padding: 15px;
}
@media (max-width: 1200px) {
  .c-bike__header {
    padding: 0;
  }
}
.c-bike__article {
  letter-spacing: .3px;
  padding: 10px;
}
.c-bike__article.c-bike__header {
  font-size: 120%;
  padding: 0;
}
.c-hamburger {
  background: transparent;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 96px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background .3s;
}
.c-hamburger:focus {
  outline: none;
}
.c-hamburger--icon {
  display: none;
}
.c-hamburger--icon ~ .c-hamburger--htx {
  transition: transform 1s;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx {
  transform: translate(250px, 0) rotate(90deg);
  transition: 1s ease-in-out;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span {
  background: none;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span::before {
  top: 0;
  transform: rotate(45deg);
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
.c-hamburger--htx__span {
  transition: transform .5s;
}
.c-hamburger--htx__span::before {
  transition-property: top, transform;
}
.c-hamburger--htx__span:after {
  transition-property: bottom, transform;
}
.c-hamburger__span {
  display: block;
  position: absolute;
  top: 44px;
  left: 18px;
  right: 18px;
  height: 8px;
  background: #930202;
  border-radius: 5px;
}
.c-hamburger__span::before,
.c-hamburger__span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 8px;
  background: #930202;
  border-radius: 5px;
  content: "";
}
.c-hamburger__span::before {
  top: -20px;
}
.c-hamburger__span::after {
  bottom: -20px;
}

<div class="l-app">
  <div class="l-app__hamburger">
    <input id="c-hamburger--icon" type="checkbox" name="c-hamburger" class="c-hamburger--icon" />
    <label for="c-hamburger--icon" class="c-hamburger c-hamburger--htx">
      <span class="c-hamburger__span"></span>
    </label>
    <nav class="l-app__menu"></nav>
  </div>
  <div class="l-app__left">
    <div class="l-app__left--inner c-bike__image"></div>
  </div>
  <div class="l-app__right">
    <div class="l-app__right--inner">
      <section class="c-bike">
        <header>
          <h3 class="c-bike__header">Bike name</h3>
        </header>
        <article class="c-bike__article">
          <header>
            <h4 class="c-bike__article c-bike__header">Secion name</h4>
          </header>
          <p class="c-bike__article c-bike__paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis diam egestas, dictum augue ut, dignissim lorem. Integer eros felis, sodales at viverra et, ultricies malesuada lacus. Nullam ex orci, vulputate vitae porta eu, gravida vel arcu. Curabitur
            mattis quis dolor sit amet dapibus. Etiam mattis diam id rhoncus tempor. Phasellus tristique auctor luctus. Nulla ullamcorper tempus porttitor. Sed et tincidunt sem. Morbi dictum ut orci sit amet pretium. Integer feugiat enim vitae neque commodo,
            ac malesuada lacus scelerisque. Donec quis odio in ipsum facilisis auctor. Vestibulum turpis turpis, blandit sit amet tempus sed, facilisis nec tellus. Morbi elementum vulputate sem a rhoncus. Vivamus bibendum congue velit, ac hendrerit est
            suscipit ac. Nunc a molestie libero.
          </p>
        </article>
      </section>
    </div>
  </div>
</div>