如何实现渐变效果的CSS复选框
How to implement fade in effect for CSS checkbox
我正在使用CSS radio input创建某种幻灯片。我有一些按钮，按下每个按钮会显示一些div。我喜欢在里面添加一些动画所以数据fadein从左边开始
$.fn.MP = function(options) {
var settings = $.extend({
// These are the defaults
text: ""
}, options);
$(this).on("click tap", "input", function() {
$(this).parent().siblings().find("input").prop("checked", false);
});
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
var $panel = $(el);
var panelId = $panel.attr('id');
var $panelBottom = $('div.panelBottom', $panel);
$('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
var $input = $(elInput);
var inputId = panelId + '-box-' + indexInput;
$input.attr('id', inputId);
$('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
});
});
$("#item1").MP({});
$("#item2").MP({});input[type="radio"] {
position: absolute;
opacity: 0;
}
.panelTop > div div {
display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
}
.panel {
width: 400px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div div {
width: 24px;
height: 24px;
float: right;
margin: 0px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
<div class="panel" id="item2">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>知道如何添加渐变效果吗?我不介意CSS或jQuery，但CSS动画不会与display: none工作。
可以在radio input状态为:checked时设置animation。
.panelTop > div div {
display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
opacity: 0;
transform: translateX(-100%);
animation: slideToRight 300ms linear forwards;
}
@keyframes slideToRight {
to {
opacity: 1;
transform: translateX(0);
}
}
代码片段:
$.fn.MP = function(options) {
var settings = $.extend({
// These are the defaults
text: ""
}, options);
$(this).on("click tap", "input", function() {
$(this).parent().siblings().find("input").prop("checked", false);
});
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
var $panel = $(el);
var panelId = $panel.attr('id');
var $panelBottom = $('div.panelBottom', $panel);
$('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
var $input = $(elInput);
var inputId = panelId + '-box-' + indexInput;
$input.attr('id', inputId);
$('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
});
});
$("#item1").MP({});
$("#item2").MP({});input[type="radio"] {
position: absolute;
opacity: 0;
}
.panelTop > div div {
display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
opacity: 0;
transform: translateX(-100%);
animation: slideToRight 300ms linear forwards;
}
@keyframes slideToRight {
to {
opacity: 1;
transform: translateX(0);
}
}
.panel {
width: 400px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div div {
width: 24px;
height: 24px;
float: right;
margin: 0px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
<div class="panel" id="item2">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>可以在幻灯片之间设置animation-delay。如果你的组件有超过3张幻灯片，你应该考虑使用javascript来设置这些延迟。
代码片段:
$.fn.MP = function(options) {
var settings = $.extend({
// These are the defaults
text: ""
}, options);
$(this).on("click tap", "input", function() {
$(this).parent().siblings().find("input").prop("checked", false);
});
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
var $panel = $(el);
var panelId = $panel.attr('id');
var $panelBottom = $('div.panelBottom', $panel);
$('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
var $input = $(elInput);
var inputId = panelId + '-box-' + indexInput;
$input.attr('id', inputId);
$('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
});
});
$("#item1").MP({});
$("#item2").MP({});input[type="radio"] {
position: absolute;
opacity: 0;
}
.panelTop > div div {
display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
opacity: 0;
transform: translateX(-100%);
animation: slideToRight 300ms linear forwards;
}
.panelTop > div input[type="radio"]:checked ~ div:nth-of-type(2) {
animation-delay: 300ms;
}
.panelTop > div input[type="radio"]:checked ~ div:nth-of-type(3) {
animation-delay: 600ms;
}
@keyframes slideToRight {
to {
opacity: 1;
transform: translateX(0);
}
}
.panel {
width: 400px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div div {
width: 24px;
height: 24px;
float: right;
margin: 0px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
<div class="panel" id="item2">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>编辑:
为了防止animation在页面加载时运行，它将在用户单击任何无线电input后添加。
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
}
.panelTop > div input[type="radio"]:checked ~ .playing {
opacity: 0;
transform: translateX(-100%);
animation: slideToRight 300ms linear forwards;
}
$.fn.MP = function(options) {
var settings = $.extend({
// These are the defaults
text: ""
}, options);
$(this).on("click tap", "input", function() {
$(this).siblings("div").addClass("playing");
$(this).parent().siblings().find("input").prop("checked", false);
});
};
// dynamically-generate id/for values
$('div.panel').each(function(index, el) {
var $panel = $(el);
var panelId = $panel.attr('id');
var $panelBottom = $('div.panelBottom', $panel);
$('div.panelTop > div > input', $panel).each(function(indexInput, elInput) {
var $input = $(elInput);
var inputId = panelId + '-box-' + indexInput;
$input.attr('id', inputId);
$('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId);
});
});
$("#item1").MP({});
$("#item2").MP({});input[type="radio"] {
position: absolute;
opacity: 0;
}
.panelTop > div div {
display: none;
}
.panelTop > div input[type="radio"]:checked ~ div {
display: block;
}
.panelTop > div input[type="radio"]:checked ~ .playing {
opacity: 0;
transform: translateX(-100%);
animation: slideToRight 300ms linear forwards;
}
.panelTop > div input[type="radio"]:checked ~ div:nth-of-type(2) {
animation-delay: 300ms;
}
.panelTop > div input[type="radio"]:checked ~ div:nth-of-type(3) {
animation-delay: 600ms;
}
@keyframes slideToRight {
to {
opacity: 1;
transform: translateX(0);
}
}
.panel {
width: 400px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div div {
width: 24px;
height: 24px;
float: right;
margin: 0px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="item1">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>
<div class="panel" id="item2">
<div class="panelTop">
Dependant Buttons:
<div>
<input type="radio" checked>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
<div>
<input type="radio">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
<div>
<input type="radio">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
<div class="panelBottom">
Main Buttons:
<label class="btn1">1</label>
<label class="btn2">2</label>
<label class="btn3">3</label>
</div>
</div>相关文章：
- 未使用jQuery验证器选中Css样式复选框时
- 自定义CSS复选框jQuery诱导的“;“已检查”;属性不't在视觉上”;“检查”;复选框
- 是否可以只使用CSS和HTML而不使用Javascript来完全自定义复选框
- 使用相同的CSS样式创建多个复选框
- 使用CSS选中/取消选中复选框时切换文本和文本框
- 更改自定义css复选框的大小
- 如果选中，请更改复选框的标签css类
- 将复选框和按钮组合在同一个 CSS 主页菜单中
- 为什么这些 CSS 复选框不显示它们的勾号
- Bootstrap 3.2:当使用jQuery添加复选框时，它不会在正确的css上可见
- 选中复选框时启用 html 单选按钮(基本 JS 或 CSS）
- 用CSS填充选中的复选框
- css正在自动选中我的html复选框
- 如果选中复选框，则使用JavaScript更改CSS可见性
- 如何应用我的类从css复选框
- 如何实现渐变效果的CSS复选框
- CSS复选框，如何使一项仅在另一项被选中时才被选中
- 带自定义CSS复选框的引导折叠
- 切换html/css复选框的选中状态
- CSS 复选框选中了材质设计叠加
