Html 如何正确设置过渡不透明度效果

当我在

@media 700

中设置

display:none

，但我想在

@media 700px

中全屏制作我的

.content

，我该怎么做

正文{
背景色：#eee；
}
.标题{
高度：50px；
宽度：100%；
边框底部：1px实心#999；
}
.集装箱{
最小宽度：500px；
最大宽度：800px；
高度：自动；
保证金：0自动；
背景色：#fff；
显示：表格；
}
.容器：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
.内容{
填充：0 15px 0 0；
显示：表格单元格；
宽度：485px；
}
.侧边栏{
颜色：白色；
宽度：300px；
左边框：1px实心#ccc；
盒影：-15px 0 10px rgba（51,51,51,5）；
不透明度：1；
过渡：不透明度.25s；
背景：#000；
显示：表格单元格；
高度：80vh；
}
.页脚{
背景色：#eee；
宽度：100%；
高度：50px；
边框顶部：1px实心#999；
位置：相对位置；
底部：0；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.集装箱{
宽度：100%；
}
}
@媒体屏幕和屏幕（最大宽度：500px）{
.集装箱{
宽度：500px；
}
}
@媒体屏幕和屏幕（最大宽度：700px）{
.内容{
高度：80vh；
填充：0；
显示：块；
保证金：0自动；
}
.侧边栏{
不透明度：0；
显示：无；
}
}

文件
Lorem ipsum dolor sit amet，奉献精英。如果最大限度的自由减去发明人的债务，那么所有的行为都是腐败的罪魁祸首。消耗减去耳廓自然量。
Lorem ipsum dolor sit amet，奉献精英。如果最大限度的自由减去发明人的债务，那么所有的行为都是腐败的罪魁祸首。消耗减去耳廓自然量。

对于侧边栏删除不透明度并将宽度设置为过渡属性，在媒体700中将其宽度设置为零，同时将宽度作为过渡属性添加到内容中，并将其宽度设置为100%

正文{
背景色：#eee；
}
.标题{
高度：50px；
宽度：100%；
边框底部：1px实心#999；
}
.集装箱{
最小宽度：500px；
最大宽度：800px；
高度：自动；
保证金：0自动；
背景色：#fff；
显示：表格；
}
.容器：：之后{
内容：“；
显示：块；
明确：两者皆有；
}
.内容{
填充：0 15px 0 0；
显示：表格单元格；
宽度：485px；
过渡：宽度为0.25s；
}
.侧边栏{
颜色：白色；
宽度：300px；
左边框：1px实心#ccc；
盒影：-15px 0 10px rgba（51,51,51,5）；
过渡：宽度为0.25s；
背景：#000；
显示：表格单元格；
高度：80vh；
}
.页脚{
背景色：#eee；
宽度：100%；
高度：50px；
边框顶部：1px实心#999；
位置：相对位置；
底部：0；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.集装箱{
宽度：100%；
}
}
@媒体屏幕和屏幕（最大宽度：500px）{
.集装箱{
宽度：500px；
}
}
@媒体屏幕和屏幕（最大宽度：700px）{
.内容{
高度：80vh；
填充：0；
显示：块；
保证金：0自动；
宽度：100%；
}
.侧边栏{
宽度：0px；
盒影：无；
}
}

文件
Lorem ipsum dolor sit amet，奉献精英。如果最大限度的自由减去发明人的债务，那么所有的行为都是腐败的罪魁祸首。消耗减去耳廓自然量。
Lorem ipsum dolor sit amet，奉献精英。如果最大限度的自由减去发明人的债务，那么所有的行为都是腐败的罪魁祸首。消耗减去耳廓自然量。

您能清楚地描述一下您的问题吗？您的问题不清楚。现在如何？是否要显示/隐藏具有平滑淡入效果的侧栏？。。。是的，没错