Question

我在Backbone中使用CSS目标进行一些基本动画。它们的问题是我当前使用的方法会将#banner附加到URL，如果用户在单击触发器以开始动画后刷新页面，Backbone将尝试将其解释为路径。关于如何管理这个以便我可以通过点击进行CSS动作的任何线索？

这是我的HTML：

<section id="banner">
    <span id="bannerexpand"></span>
    <a href="#banner" id="click">Click Me</a>
    <span id="bannerhidden"></span>
</section>

这是我的CSS：

#banner {
    height: 70px;
    background-color: #CCCCCC;
}

#banner:target {
    height: 140px;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -ms-transition: 1s ease;
    transition: 1s ease;
}

#bannerhidden {
    display: none;
}

#banner:target #click {
    display: none;
}

#banner:target #bannerhidden {
    display: block;
    background-color: #CCCCCC;
}

Answer 1

如果你想避免使用:target方法，这应该通过javaScript来处理。

另外，在CSS和非语义方式中，您可以使用form元素来触发:checked州： DEMO HTML已更新：

<input type="checkbox" id="hdshw"/><section id="banner" tabindex="0">
        <span id="bannerexpand"></span>
        <label id="click" for="hdshw">Click Me</label>
        <span id="bannerhidden" ></span>
    </section>

使用CSS：

#banner {
height: 70px;
background-color: #CCCCCC;
}
:checked ~ #banner {
 height: 140px;
 -webkit-transition: 1s ease;
 -moz-transition: 1s ease;
 -o-transition: 1s ease;
 -ms-transition: 1s ease;
 transition: 1s ease;
 }

#bannerhidden,
#hdshw{/* hide the checkbox */
display: none;
 }

:checked ~ #banner  #click {
display: none;
 }

:checked ~ #banner  #bannerhidden {
display: block;
background-color: #CCCCCC;
 }

这不是旧浏览器的防弹。

使用CSS3目标而不会导致Backbone中的路由问题

1 个答案: