DannyBoy DannyBoy - 1 month ago 6
CSS Question

How to implement fade in effect for CSS checkbox

I am creating some sort of slide show using

CSS radio input
. So I have some buttons that pressing each will show some
div
s. I like have some animation in that so data
fadein
from left.



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





Any idea how to add the fade effect. I don't mind CSS or jQuery but CSS animation wont work with
display: none
.
Thanks in advance.

Answer

You can set a CSS animation when the radio input state is :checked.

.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);
  }
}

CODE SNIPPET:

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


You can always set an animation-delay between slides. If your component will have more than 3 slides you should consider using javascript to set these delays.

CODE SNIPPET:

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

EDIT:

To prevent the animation from running on page load, it will be added after the user clicks any radio 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>