javascript - 如何使div过渡平滑

Question

单击复选框后，我希望一个元素顺利出现而其他元素顺利消失

我使用过UI Kit。

这是我尝试的代码: 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>

Answer 1

$(document).ready(function(){   
   $('#button').change(function(){
      if($(this).is(':checked')){
 	 $('#red').addClass('blue');
      }
	
     else {
        $('#red').removeClass('blue');
     }
   });
});

#red {
   width: 250px;
  height: 250px;
  background: red;
  transition: all 2s linear;

}

.blue {
   width: 250px;
  height: 250px;
  background: blue !important;
  transition: all 2s linear;
   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.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 class="main-container"> 
    <div id="red">
    </div>
   </div>
</div>