使用单选按钮进行过渡

Question

我找到了这个教程，它介绍了我需要的一个过渡，我的页面使用单选按钮点击一下就可以滑动。

这个想法是，我的页面的width和height是100%，每次点击使用translateY移动页面"离开画布"(在tyyli.css行663中发现)，就像在提供的教程中一样。

经过所有的努力，我不能得到它的工作，如果我把第一个单选按钮在st-scrolldiv内。我必须把它直接在site-wrapper下让它工作，但现在看起来很可怕，因为它不会随着页面移动，只是隐藏在st-scroll下。此外，st-scroll DIV外的点导致整个页面比它应该的低100px。

这是顶部的单选按钮。

<input type="radio" name="radio-set" id="st-control-1"/>
<a href="#st-panel-1" class="arrow-down up"></a>

试着把这段代码从第一个<secton>移到site-wrapper下面，像这样

<div class="menu">
    <a href="#" class="button i"></a>
    <a href="http://facebook.com/Kadnnn" target="_blank" class="button f"></a>
    <a href="mailto:[e-mail]" class="button e"></a>
</div>
/*TRY TO PUT IT JUST BELOW THIS LINE AND SEE THE PROBLEM*/
<input type="radio" name="radio-set" id="st-control-1"/>
<a href="#st-panel-1" class="arrow-down up"></a>
<div class="st-scroll">

，您将看到问题所在。我的想法是，这与z指数有关，但我可能错了。我想把两个按钮都放在st-scroll里面。

我的网址是www.kasperikoski.fi

Answer 1

您可以使用标签来控制单选按钮，因此您可以将标签放在任何您想要的位置，并对它们的样式有更多的控制，以及隐藏单选按钮。但是，如果您想使用~或+组合子，那么无线电必须是您想要控制的元素的兄弟或其祖先之一。

.st-scroll {
  padding: 1em;
  background-color: tomato;
  transition: transform 500ms ease;
}
input[name="radio-set"] {
  display: none;
}
label {
  display: block;
  margin-bottom: 0.5em;
  padding: 1em;
  background-color: lightgray;
  border: solid 1px gray;
  border-radius: 0.5em;
}
input[type="radio"] + label {
  display: inline-block;
}
#st-control-1 ~ .st-scroll {
  transform: translateY(100%);
}
#st-control-1:checked ~ .st-scroll {
  transform: translateY(0);
}

<input type="radio" id="st-control-1" name="radio-set" checked="checked" />
<div class="st-scroll">
  <label for="st-control-1">I'm a label in .st-scroll but am linked to #st-control-1 so I can control my parent</label>
<input type="radio" id="st-control-2" name="radio-set" />
<label for="st-control-2">I'm a label linked to the other radio</label>
</div>

Answer 2

链接只在div之外工作的原因是因为该效果是由CSS: #st-control-#:checked ~ .st-scroll驱动的，这意味着它会寻找具有.st-scroll类的兄弟DOM元素。你需要把它放在滚动元素的外部，或者依靠javascript通过添加/删除某些类来触发相同的转换。

我可以看到有很多方法可以做到，尽管最快的(我很懒)是这样的:

In html:

<input type="radio" name="radio-set" id="st-control-1" value="scroll-1">

…进一步降低

<input type="radio" name="radio-set" id="st-control-2" value="scroll-2">

在包含jquery的脚本中节省时间…

$(document).ready(function(){
       var scroll = $('.st-scroll');
       $('input[name="radio-set"]').click(function() {
             var which = $(this).attr('value');
             var prev = scroll.data('current');
             if(prev) scroll.removeClass(prev);
             scroll.addClass(which)
                   .data('current',which);
       });
});

最后是css:

.scroll-1 {
   transform: translateY(-100%);
}
.scroll-2 {
   transform: translateY(0);
}