Question

通过Bootstrap 4和HTML 5，我试图通过单击按钮使Bootstrap列可折叠，并且过渡良好。我正在使用此处描述的Bootstrap折叠组件：https://getbootstrap.com/docs/4.0/components/collapse/。

默认情况下，这会垂直折叠div列。为了实现水平折叠过渡，我添加了一些CSS。

我能够通过以下代码段重新创建我的问题：

.collapse { 
    visibility: hidden;
}
.collapse.show {
    visibility: visible;
    display: block;
}
.collapsing {
    position: relative;
    height: 0; 
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;  
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    }
.collapsing.width {-webkit-transition-property: width, visibility;
    transition-property: width, visibility;
    width: 0;
    height: auto;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<div class="container-fluid p-0">
  <div class="row no-gutters">
    <div id="left-column" class="col-2 p-0 m-0 collapse show width">
      <div style="Background: #6d7fcc;">
      This should transition
      </div>
    </div>
    <div class="col-10">
      <a href='#' data-toggle="collapse" data-target="#left-column">
      Click here to transition
      </a>
    </div>
  </div>
</div>

在上面，元素确实被隐藏了；但是，根本没有过渡。经过许多令人沮丧的分钟后，我发现我可以通过折叠左栏div中的“ col-2”类来实现水平转换的梦想，如下所示：

.collapse { 
    visibility: hidden;
}
.collapse.show {
    visibility: visible;
    display: block;
}
.collapsing {
    position: relative;
    height: 0; 
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;  
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    }
.collapsing.width {-webkit-transition-property: width, visibility;
    transition-property: width, visibility;
    width: 0;
    height: auto;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<div class="container-fluid p-0">
  <div class="row no-gutters">
    <div id="left-column" class="p-0 m-0 collapse show width">
      <div style="Background: #6d7fcc;">
      This should transition
      </div>
    </div>
    <div class="col-10">
      <a href='#' data-toggle="collapse" data-target="#left-column">
      Click here to transition
      </a>
    </div>
  </div>
</div>

这背后的原因是什么？在实现自举网格系统的同时如何实现这种水平过渡？

Bootstrap 4崩溃过渡不适用于col-2类

0 个答案: