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>

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>

Answer 2

$(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>

Answer 3

您只需要将一个盒子堆叠在另一个盒子上

.uk-container{
  position : relative;
}
.red,.blue{
  position:absolute;
  top:50px

}

Answer 4

使用复选框时，需要选中复选框为check或uncheck，我使用jquery来解决此问题，

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

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

}

.blue {
   width: 250px;
  height: 250px;
  background: blue;
  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" class="red">
  </div>
  <div id="blue" aria-hidden="true" hidden class="blue">
    
  </div>
   </div>
</div>

如何使div过渡平滑

4 个答案: