使用单选按钮转换

Question

我发现 this tutorial，它引入了我需要的过渡，我的页面可以使用单选按钮单击一下将其向下滑动。

我的想法是，我的页面 width 和 height 是 100%，每次点击使用 translateY 移动页面 "off the canvas"（位于 tyyli.css 第 663 行）就像在提供的教程中一样。

如果我将第一个单选按钮放在 st-scroll div 中，那么在所有努力之后我都无法正常工作。我必须将它直接放在 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:mymail@mymail.fi" 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-index 有关，但我可能错了。我想将两个按钮都放在 st-scroll.

内

我的网站是www.kasperikoski.fi

Answer 1

链接只能在 div 之外工作的原因是因为效果是由 CSS 驱动的：#st-control-#:checked ~ .st-scroll 这意味着它寻找兄弟 DOM带有 .st-scroll class 的元素。您需要将它放在滚动元素的外部，或者依靠 javascript 通过 adding/removing 某些 classes.

触发相同的转换

我可以看到它以各种方式完成，尽管最快的（我很懒）是这样的：

在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 的脚本中以节省时间...:[=15=]

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

Answer 2

您可以使用标签来控制单选按钮，这样您就可以将标签放在任何您想要的位置，并更好地控制它们的样式，以及隐藏单选按钮。但是，如果要使用 ~ 或 + 组合器，则收音机必须是您要控制的元素的兄弟姐妹或其祖先之一。

演示版

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

使用单选按钮转换

Transition using radio-buttons

css

css-transitions