CSS转换打开输出

我需要一个帮助，我正试图实现汉堡菜单动画检查和取消检查。我能够为菜单设置动画，但我不知道如何在转换为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;
   }
}

---

以下是。

将

高度

和

宽度

属性应用于元素的默认状态，而不是仅在选中菜单后应用。和属性的默认值为

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

属性也应该设置为默认状态本身。这是必需的，因为

位置

不是可传递属性

@导入url（“https://fonts.googleapis.com/css?family=Titillium+网站);；
* {
填充：0；
保证金：0；
字号：中等；
字体系列：“titilliumweb”，无衬线；
}
.l-应用程序菜单{
位置：固定；
排名：0；
高度：100vh；
宽度：270px；
转化：translateX（-100%）；
转换：1s易入易出；
}
.c-汉堡--图标：选中~.l-应用程序菜单{
变换：translateX（0）；
背景：#000；
不透明度：.7；
}
.l-app_uu左{
浮动：左；
位置：固定；
背景#185a9d；
宽度：50%；
身高：100%；
溢出：隐藏；
}
@介质（最大宽度：1200px）{
.l-app_uu左{
位置：静态；
宽度：100%；
高度：100vh；
背景：#fff；
}
}
.l-app_uu右{
浮动：对；
背景：#fff；
宽度：50%；
高度：100vh；
}
@介质（最大宽度：1200px）{
.l-app_uu右{
位置：静态；
宽度：100%；
背景：#bfbf；
}
}
.l-app_uu右-内部{
填充：50px；
}
.l-app_uu汉堡{
位置：固定；
z指数：1；
}
.c-自行车图片{
背景：url(http://bikeshopgirl.com/wp-content/uploads/2011/10/15038.jpg)不重复；
背景尺寸：包含；
最小高度：100%；
不透明度：.9；
排名：0；
位置：相对位置；
}
@介质（最大宽度：1200px）{
.c-自行车图片{
位置：静态；
宽度：自动；
不透明度：1；
}
}
.c-自行车车头{
字体大小：150%；
填充：15px；
}
@介质（最大宽度：1200px）{
.c-自行车车头{
填充：0；
}
}
.c-自行车文章{
字母间距：.3px；
填充：10px；
}
.c-bike\u文章.c-bike\u标题{
字体大小：120%；
填充：0；
}
c-汉堡包{
背景：透明；
显示：块；
位置：相对位置；
溢出：隐藏；
保证金：0；
填充：0；
宽度：96px；
高度：96px；
字号：0；
文本缩进：-9999px；
外观：无；
盒影：无；
边界半径：无；
边界：无；
光标：指针；
过渡：背景。3s；
}
c汉堡包：聚焦{
大纲：无；
}
c汉堡包——图标{
显示：无；
}
.c-汉堡包--图标~.c-汉堡包--htx{
转变：转变1s；
}
.c-汉堡包--图标：选中~.c-汉堡包--htx{
变换：平移（250px，0）旋转（90度）；
转换：1s易入易出；
}
.c-汉堡包--图标：选中~.c-汉堡包--htx.c-汉堡包{
背景：无；
}
.c-汉堡--图标：选中~.c-汉堡--htx.c-汉堡{
排名：0；
变换：旋转（45度）；
}
.c-汉堡--图标：选中~.c-汉堡--htx.c-汉堡{
底部：0；
变换：旋转（-45度）；
}
.c-汉堡包——htx{
转变：转变；
}
.c-汉堡包——htx_uuuspan:：之前{
转换属性：top，transform；
}
.c-汉堡包——htx_uuuspan:之后{
转换属性：底部，转换；
}
.c-汉堡包{
显示：块；
位置：绝对位置；
顶部：44px；
左：18px；
右：18px；
高度：8px；
背景#930202 ;；
边界半径：5px；
}
.c-汉堡包：之前，
.c-汉堡包span：：之后{
位置：绝对位置；
显示：块；
左：0；
宽度：100%；
高度：8px；
背景#930202 ;；
边界半径：5px；
内容：“；
}
.c-汉堡包：之前{
顶部：-20px；
}
.c-汉堡包span：：之后{
底部：-20px；
}

自行车名称
教名

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是我的誓言，奥古斯都的名言，是我的尊严。整数厄洛斯猫咪，维韦拉等地的苏打水，ultricies malesuada lacus。无睾丸激素、外阴血脉、孕妇血脉。库拉比图尔
马蒂斯·奎斯·多洛坐在阿梅特·达皮布斯身边。第二根横膈肌。绿背飞虱（Phasellus tristique auctor luctus）。乌拉姆科珀·坦普斯·波特托。Sed et tincidunt sem。这是我的至理名言。整型封建生活，
ac malesuada lacus权杖。Donec quis odio在同侧面部拍卖。前庭turpis turpis，blandit sit amet tempus sed，facilisis nec tellus。Morbi elementum vulputate扫描电镜a菱形。比本杜姆康盖维利特（Vivamus bibendum congue velit），ac hendrerit est
suscipit ac.Nunc是一个骚扰自由者。