为什么在较小的屏幕(而不是台式机)上无法进行过渡?

时间:2018-07-16 09:05:43

标签: css sass

我有以下SASS样式定义:

@import "bulma/sass/utilities/initial-variables.sass";

@mixin show-sidebar-responsive($size) {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: $size;
    background-color: #24344b;
}

.sidebar-container {
    transition: width 1s;
    display: none;
}

@media (min-width: $desktop) and (max-width: $widescreen) {
    .sidebar-container {
        @include show-sidebar-responsive(250px);
    }
}

@media (min-width: $widescreen) {
    .sidebar-container {
        @include show-sidebar-responsive(280px);
    }
}

如您在上面的代码中所见,我在不同屏幕尺寸的宽度上使用了 transition 。从$desktop$widescreen的过渡效果很好,但在$desktop以下的过渡效果不佳,为什么?

我从bulma获得了断点。

我忘记定义什么?

1 个答案:

答案 0 :(得分:1)

displaynone更改为flex时,过渡不适用。 在小于$desktop的屏幕尺寸上,您可以将width设置为0或其他尺寸,或者使用一些技巧来隐藏元素,但不要将display设置为无。