如何在从 col-12 更改为 col-9 时向 css 中的 div 添加过渡效果？答案

【问题标题】：How to add transition effect to a div in css on changing from col-12 to col-9?如何在从 col-12 更改为 col-9 时向 css 中的 div 添加过渡效果？
【发布时间】：2019-01-23 09:29:48
【问题描述】：

下面给出的 css 仅在我使用类“onclick-div”关闭我的 div 时才有效，但是当我单击按钮时看不到过渡效果，即当我想用类减小 div 的宽度时从 col-12 到 col-9 的“set-transition”我看不到过渡效果。

我的 HTML：

<div class="container">
  <div class="col-12 set-transition" [ngClass]="{'col-md-9' : dropDownVar === 2}">
    <button (click)="dropDownVar=2">+ ADD</button>
  </div>

  <div class="col-12 col-md-3 onclick-div" *ngIf="dropDownVar === 2">
  </div>

</div>

我的 CSS：

.set-transition {
  transition:flex 0.5s ease;
  width:auto;
  flex: 1;
}

【问题讨论】：

您可以尝试使用all 代替flex 看看是否有效？
不，它不工作

标签： angular html css bootstrap-4

【解决方案1】：

这已经在前面回答了 bootstrap 3 Bootstrap 3 animated columns when changing position media queries

方法还是一样的，使用transition: all ...

.show-transition {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-12 col-md-9 show-transition bg-dark text-light">Test</div>
    <div class="col-md-3">Test 2</div>
  </div>
</div>

【讨论】：

它没有用，我在提交这个问题之前检查了这个解决方案。
我可以运行它并看到它工作。您使用的是什么浏览器以及如何验证它不起作用？
我还需要添加其他样式吗？
我正在使用 chrome，并且当我关闭第二个 div 时，过渡工作正常，但是当我打开第二个 div 时，它没有显示过渡效果
从附加的sn-p可以看出，没有应用其他样式，只有你在这里看到的。