200 Success
200 Success 博客
200 Success
常用标签
组员

这是一个简单的关于transition与overflow属性的小demo

在线示例
body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

#test-box,
#test-box-1 {
    width: 20%;
    height: 20rem;
    background-color: skyblue;
    transition: height 0.5s;
    margin-left: 1rem;
    margin-bottom: 1rem;
    /* div块高度为0时,内部元素都因溢出而隐藏,但有滚动条,可隐藏。 */
    overflow: auto;
}

#test-box h1 {
    /* 给定宽度*/
    width: 100%;
    /* 换行处理:不换行 */
    white-space: nowrap;
    /* 溢出内容做隐藏处理 */
    overflow: hidden;
    /* 溢出的隐藏内容用省略号替代 */
    text-overflow: ellipsis;
}

#test-box::-webkit-scrollbar {
    display: none;
}

.box-close {
    height: 0 !important;
    /* display: none;  不可配合transiton使用 */
}

#btn-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 1rem;
}

#btn {
    border: 1px solid red;
    width: 1rem;
    height: 1.5rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
    margin-right: 1rem;
    transition: 0.5s;
}

.btn-change {
    transform: rotate(360deg);
}
<body>
    <div id="btn-box">
        <!-- 触发一个事件若要调用多个函数,可用逗号相隔 -->
        <div id="btn" onclick="div_change(),btn_change(this)"></div>
        <span class="btn-span">点我</span>
    </div>
    <div id="test-box">
        <h1>1This is a transition test!This is a transition test!</h1>
        <h1>2This is a transition test!</h1>
        <h1>3This is a transition test!</h1>
        <h1>4This is a transition test!</h1>
        <h1>5This is a transition test!</h1>
        <h1>6This is a transition test!</h1>
    </div>
    <div id="test-box-1">
        <h1>1This is a transition test!</h1>
    </div>
</body>
<script>
    function div_change() {
        let testBox = document.getElementById('test-box');
        if (!testBox.className) {
            testBox.className = 'box-close';
        } else {
            testBox.className = '';
        }
    }

    function btn_change(e) {
        if (!e.className) {
            e.className = 'btn-change';
        } else {
            e.className = '';
        }
    }
<script>
CSS
访问: 524 次
    Hokori
    February 2nd, 2020 at 08:06 pm

    膜拜大佬

      Shiina
      Shiina
      February 2nd, 2020 at 08:10 pm

      能不能引入表情包 滑稽.jpg

        Hokori
        February 2nd, 2020 at 09:35 pm

        想想都很难,尝试前就想放弃了

    Leslie
    Leslie
    February 2nd, 2020 at 09:41 pm

    本菜鸟来学习了哈哈哈哈

      Hokori
      February 2nd, 2020 at 10:40 pm

      好的大哥

        Leslie
        Leslie
        February 2nd, 2020 at 11:32 pm

        [玫瑰]

          Shiina
          Shiina
          February 3rd, 2020 at 12:53 am

          [抱拳]

    Shiina
    Shiina
    February 4th, 2020 at 02:22 pm

    icon_twisted.png

      Hokori
      February 4th, 2020 at 03:45 pm

      icon_mrgreen.png 大佬上线了

        Leslie
        February 4th, 2020 at 03:50 pm

        大大佬们,以后多带带小弟,跟你们混饭吃 icon_exclaim.png

添加新评论

icon_biggrin.pngicon_neutral.pngicon_twisted.pngicon_arrow.pngicon_eek.pngicon_smile.pngicon_sad.pngicon_cool.pngicon_evil.pngicon_mrgreen.pngicon_exclaim.pngicon_surprised.pngicon_razz.pngicon_rolleyes.pngicon_wink.pngicon_cry.pngicon_confused.pngicon_lol.pngicon_mad.pngicon_question.pngicon_idea.pngicon_redface.png