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>