单击复选框后,我希望一个元素平滑显示,其他元素平滑消失
我用过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>
解决了:
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句