jquery - 使用选中的 radio 过渡到 div

Question

我需要 .slide 进行我为 input[type="radio"]:checked~.slide 设置的转换，但我似乎无法获得它与我的 JS 代码一起工作，将 .hide 添加到未选择的 radio 。

当选择 radio 时，不是让 .slide 到 display:block，而是如何将 transition 添加到 .slide 当它被赋予类 .hide 时？

$(".option").on("click", function() {
  $(".window").slideToggle("fast");
  $('.slide').addClass('hide');
});

$(':radio').change(function(event) {
  var id = $(this).data('id');
  $('.' + id).removeClass('hide').siblings().addClass('hide');
});

.hide {
  display: none;
}

.window {
  display: none;
}

.list {
  display: flex;
  list-style: none;
  border: 3px solid;
}

.slide {
  width: 200px;
  border: 3px solid;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked~.slide {
  -webkit-transition: all 2.5s ease;
  -moz-transition: all 2.5s ease;
  -o-transition: all 2.5s ease;
  transition: all 0.2s ease;
}

input[type="radio"]:checked~label svg {
  opacity: 1;
  border: 3px solid;
  border-radius: 50%;
  fill: #fff;
}

.option {
  padding: 20px 30px;
  cursor: pointer;
  display: inline-block;
  color: white;
  border-radius: 4px;
  font-weight: 700;
  background: #fc2757;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="create" value="create" name="radio" data-id="create"><label class="option" for="create">Create</label></input>
<div class="window">
  <ul class="list">
    <li>
      <input type="radio" id="deal" value="deal" name="radio" data-id="deal" /><label for="deal"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="50" height="50"><path d="M21.531 54.713L39.29 72.472l32.583-32.583L54.115 22.13 21.531 54.713zm70.993-24.39l-7.556-7.557a10.088 10.088 0 0 1-4.841 1.231c-5.591 0-10.123-4.532-10.123-10.122 0-1.753.448-3.402 1.232-4.841l-7.557-7.557a5.074 5.074 0 0 0-7.157 0L1.478 56.524a5.075 5.075 0 0 0 0 7.156l7.558 7.557a10.085 10.085 0 0 1 4.841-1.23c5.591 0 10.122 4.53 10.122 10.121 0 1.753-.447 3.402-1.232 4.842l7.557 7.557a5.077 5.077 0 0 0 7.158 0l55.044-55.046a5.077 5.077 0 0 0-.002-7.158zM39.29 80.595L13.41 54.713l40.707-40.705 25.879 25.881L39.29 80.595z" fill="#929daf"/></svg>Deals</label></li>
    <li>
      <input type="radio" id="buzz" value="buzz" name="radio" data-id="buzz" /><label for="buzz"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="50" height="50"><path d="M78.2 48.916a3.647 3.647 0 0 1 0-3.195l3.355-6.866a3.639 3.639 0 0 0-1.565-4.814l-6.75-3.58a3.634 3.634 0 0 1-1.877-2.588l-1.321-7.529a3.637 3.637 0 0 0-4.094-2.973l-7.569 1.07a3.642 3.642 0 0 1-3.038-.986l-5.495-5.313a3.64 3.64 0 0 0-5.061 0l-5.495 5.313a3.634 3.634 0 0 1-3.038.986l-7.569-1.07a3.635 3.635 0 0 0-4.09 2.973l-1.321 7.529a3.644 3.644 0 0 1-1.878 2.587l-6.753 3.58a3.64 3.64 0 0 0-1.561 4.815l3.355 6.866a3.647 3.647 0 0 1 0 3.195l-3.355 6.867a3.639 3.639 0 0 0 1.564 4.814l6.75 3.58a3.644 3.644 0 0 1 1.878 2.588l1.32 7.528a3.637 3.637 0 0 0 4.095 2.973l7.568-1.07a3.642 3.642 0 0 1 3.039.986l5.494 5.313a3.64 3.64 0 0 0 5.062 0l5.495-5.313a3.634 3.634 0 0 1 3.038-.986l7.569 1.07a3.637 3.637 0 0 0 4.093-2.973l1.321-7.528a3.644 3.644 0 0 1 1.878-2.588l6.75-3.58a3.642 3.642 0 0 0 1.565-4.814l-3.36-6.867zM40.04 69.152l8.9-16.965-14.555-7.263 20.214-19.438-8.901 16.95 14.552 7.263-20.21 19.453z" fill="#929daf"/></svg>Buzz</label></li>
  </ul>
</div>
<div class="slide deal hide">deals</div>
<div class="slide buzz hide">buzz</div>

Answer 1

我无法得到你真正想要的，但如果你想在显示幻灯片和广播时进行过渡，试试这个:

   
    $(".option").on("click", function () {
        $(".window").slideToggle("fast");
        $('.slide').addClass('hide');
    });

    $(':radio').change(function (event) {
        var id = $(this).data('id');
        $('.' + id).removeClass('hide').siblings().addClass('hide');
      
    });

   .hide {
            display: none;
        }

        .window {
            display: none;
        }

        .list {
            display: flex;
            list-style: none;
            border: 3px solid;
        }

        .slide {
            width: 200px;
            border: 3px solid;
          
        }



        input[type="radio"] {
            display: none;
        }

        .slide {
            -webkit-transition: all 2.5s ease;
            -moz-transition: all 2.5s ease;
            -o-transition: all 2.5s ease;
            transition: all 2.5s ease;
        }

        input[type="radio"]:checked ~ label svg {
            opacity: 1;
            border-color: black;
            fill: #fff;
        }

        input[type="radio"] ~ label svg {
            border: 3px solid transparent;
            -webkit-transition: .5s ease;
            -moz-transition: .5s ease;
            -ms-transition: .5s ease;
            -o-transition: .5s ease;
            transition: .5s ease;

            border-radius: 50%;
        }

        .option {
            padding: 20px 30px;
            cursor: pointer;
            display: inline-block;
            color: white;
            border-radius: 4px;
            font-weight: 700;
            background: #fc2757;
            cursor: pointer;
        }

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="create" value="create" name="radio" data-id="create"><label class="option"
                                                                                    for="create">Create</label></input>
<div class="window">
    <ul class="list">
        <li>
            <input type="radio" id="deal" value="deal" name="radio" data-id="deal"/><label for="deal">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="50" height="50">
                    <path d="M21.531 54.713L39.29 72.472l32.583-32.583L54.115 22.13 21.531 54.713zm70.993-24.39l-7.556-7.557a10.088 10.088 0 0 1-4.841 1.231c-5.591 0-10.123-4.532-10.123-10.122 0-1.753.448-3.402 1.232-4.841l-7.557-7.557a5.074 5.074 0 0 0-7.157 0L1.478 56.524a5.075 5.075 0 0 0 0 7.156l7.558 7.557a10.085 10.085 0 0 1 4.841-1.23c5.591 0 10.122 4.53 10.122 10.121 0 1.753-.447 3.402-1.232 4.842l7.557 7.557a5.077 5.077 0 0 0 7.158 0l55.044-55.046a5.077 5.077 0 0 0-.002-7.158zM39.29 80.595L13.41 54.713l40.707-40.705 25.879 25.881L39.29 80.595z"
                          fill="#929daf"/>
                </svg>
                Deals</label></li>
        <li>
            <input type="radio" id="buzz" value="buzz" name="radio" data-id="buzz"/><label for="buzz">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.638 94.638" width="50" height="50">
                    <path d="M78.2 48.916a3.647 3.647 0 0 1 0-3.195l3.355-6.866a3.639 3.639 0 0 0-1.565-4.814l-6.75-3.58a3.634 3.634 0 0 1-1.877-2.588l-1.321-7.529a3.637 3.637 0 0 0-4.094-2.973l-7.569 1.07a3.642 3.642 0 0 1-3.038-.986l-5.495-5.313a3.64 3.64 0 0 0-5.061 0l-5.495 5.313a3.634 3.634 0 0 1-3.038.986l-7.569-1.07a3.635 3.635 0 0 0-4.09 2.973l-1.321 7.529a3.644 3.644 0 0 1-1.878 2.587l-6.753 3.58a3.64 3.64 0 0 0-1.561 4.815l3.355 6.866a3.647 3.647 0 0 1 0 3.195l-3.355 6.867a3.639 3.639 0 0 0 1.564 4.814l6.75 3.58a3.644 3.644 0 0 1 1.878 2.588l1.32 7.528a3.637 3.637 0 0 0 4.095 2.973l7.568-1.07a3.642 3.642 0 0 1 3.039.986l5.494 5.313a3.64 3.64 0 0 0 5.062 0l5.495-5.313a3.634 3.634 0 0 1 3.038-.986l7.569 1.07a3.637 3.637 0 0 0 4.093-2.973l1.321-7.528a3.644 3.644 0 0 1 1.878-2.588l6.75-3.58a3.642 3.642 0 0 0 1.565-4.814l-3.36-6.867zM40.04 69.152l8.9-16.965-14.555-7.263 20.214-19.438-8.901 16.95 14.552 7.263-20.21 19.453z"
                          fill="#929daf"/>
                </svg>
                Buzz</label></li>
    </ul>
</div>
<div class="slide deal hide animated fadeIn">deals</div>
<div class="slide buzz hide animated fadeIn">buzz</div>