我尝试使用三个列布局
构建一个与CSS Grid反应的应用程序<div>
<div class="sidebar"><button>collapse list</button></div> // 100px
<div class="list"></div> // 200px
<div class="item-detail"></div> //auto
</div>
当我点击侧栏上的折叠列表按钮时,我需要隐藏list
div并使用幻灯片放入和缩小动画展开item-detail
div / p>
我尝试在hidden
上添加课程list
,expanded
添加item-detail
.item-detail.expanded{
grid-column: 2 / -1;
}
.list{
-webkit-animation: slide-in .3s ease-out;
-moz-animation: slide-in .3s ease-out;
}
.hidden {
display: none;
opacity: 0;
}
@-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes slide-in {
0% {
opacity: 0;
-moz-transform: translateX(-100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
这在显示列表时按预期工作,但隐藏它时是如此突然(没有动画),因为display:none
立即发生。我怎样才能实现双向动画?
答案 0 :(得分:0)
如果添加list
类,只需将hidden
的宽度设为0:
.list{
width: 200px;
transition: all 0.3s ease-out;
opacity: 1;
visibility: visible;
}
.list.hidden{
visibility: hidden;
opacity: 0;
width: 0;
}