javascript - 如何使div过渡平滑

Question

单击复选框后，我希望一个元素平滑显示，而其他元素平滑消失

我用过UI 工具包。

这是我尝试的代码： https ://codepen.io/Abdubek/pen/wvwdaoE

UIkit.util.on("#button", 'click', function() {
  UIkit.toggle("#red", {
    animation: "uk-animation-fade"
  }).toggle();
  UIkit.toggle("#blue", {
    animation: "uk-animation-fade"
  }).toggle();
})

.red {
  width: 250px;
  height: 250px;
  background: red;
}

.blue {
  width: 250px;
  height: 250px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>

<div class="uk-container uk-flex uk-flex-center uk-flex-middle uk-flex-column">
  <input type="checkbox" id="button" class="uk-button uk-button-primary uk-margin-bottom" />

  <div id="red" class="red"></div>
  <div id="blue" aria-hidden="true" hidden class="blue"></div>

</div>

标签： javascriptjquerycssuikitcss-transitions

Answer 1

解决了：

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.min.js"></script>
<div class="uk-container uk-padding uk-flex uk-flex-center uk-flex-middle uk-flex-column">

<p class="box box-first uk-card uk-card-default uk-card-body uk-text-muted uk-flex 
uk-flex-middle uk-flex-center uk-text-lead uk-margin-remove">BOX [ A ]</p>
<p class="box box-second uk-background-primary uk-card uk-card-default uk-card-body uk-light uk-flex uk-flex-middle uk-flex-center uk-text-lead uk-margin-remove" hidden>BOX [ B ]</p>
  
  <button
      class="uk-button uk-button-default uk-margin"
      type="button"
      uk-toggle="target: .box; animation: uk-animation-fade; queued: true; duration: 300"
  >Toggle Box</button>
</div>