如何实现CSS复选框的淡入效果

Question

我正在使用CSS radio input制作某种幻灯片。所以我有一些按下按钮会显示一些div。我喜欢有一些动画，所以左边是数据fadein。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

知道如何添加淡入淡出效果。我不介意CSS或jQuery，但CSS动画不适用于display: none。 提前谢谢。

Answer 1

当animation州为radio input时，您可以设置CSS :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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您始终可以在幻灯片之间设置animation-delay。如果您的组件有超过3张幻灯片，您应该考虑使用javascript来设置这些延迟。

CODE SNIPPET：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：

要阻止animation在页面加载时运行，系统会在用户点击任何广播input后添加。{/ p>

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;