CSS3 过渡:是不是有不使用 JQuery 的点击选项?

Posted

技术标签:

【中文标题】CSS3 过渡:是不是有不使用 JQuery 的点击选项?【英文标题】:CSS3 Transitions: is there an on click option without using JQuery?CSS3 过渡:是否有不使用 JQuery 的点击选项? 【发布时间】:2012-06-25 08:46:06 【问题描述】:

这很好用:

<style type="text/css"> 
    div
    
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    

    div:hover
    
    width:300px;
    
    </style>

但是有没有人知道使用点击而不是悬停来做到这一点的方法?并且不涉及 JQuery?

谢谢!

【问题讨论】:

【参考方案1】:

你可以这样写:

CSS

inputdisplay:none
.ani
    
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    display:block;
    
input:checked + .aniwidth:300px;

HTML

<input type="checkbox" id="button">
<label class="ani" for="button"></label>

查看http://jsfiddle.net/nMNJE/

【讨论】:

谢谢!这非常接近我想要的!【参考方案2】:

您有两种选择,一种使用 javascript,另一种使用 CSS 伪类“active”。旧浏览器将支持 javascript 方法,这是我推荐的方法。但是,要使用 CSS 方法,只需将 div:hover 更改为 div:active。

Javascript:

<script type="text/javascript">
function expand()
    document.getElementById('id').style.;

</script>

CSS:

<style type="text/css"> 
div#id

width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */

</style>

html

<div id="id" onClick="expand()">
    Div Content...
</div>

【讨论】:

【参考方案3】:

其实有一个不使用javascript的点击选择器。您可以使用 :target 伪类来影响不同的 DOM 元素。 如果一个元素是锚目标的目的地,它将获得 :target 伪元素(要影响被点击的元素,只需将 ID 设置为与其锚标签相同)。

<style>
a  color:black; 
a:target  color:red; 
</style>

<a id="elem" href="#elem">Click me</a>

这是一个可以玩的小提琴:https://jsfiddle.net/k86b81jv/

【讨论】:

【参考方案4】:

没有使用 sass 的点击没有 css 选择器,所以使用 jquery 可能是你最好的选择

$(document).ready(function()
$('#DIV_ID').click(function()
$(this).animate(width:'300px',200);
);
);

((不要忘记在标题中包含插件链接!!))

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

【讨论】:

以上是关于CSS3 过渡:是不是有不使用 JQuery 的点击选项?的主要内容,如果未能解决你的问题,请参考以下文章

什么更快? CSS3 过渡还是 jQuery 动画?

使用 CSS3 动画/过渡高度,但使用 jQuery?

CSS3 过渡以突出显示在 JQuery 中创建的新元素

jQuery .css() 中的 CSS3 过渡

jQuery Transit 过渡效果

CSS3 动画过渡:不透明度不起作用