CSS CSS3 过渡点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16912023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transition click event
提问by Chathuraka
I wand to implement a click event in css3 transition for a div tag. I want it to be like a normal button click event. Still I couldn't find a way to do this. Please can any one help me on this.
我想在 css3 转换中为 div 标签实现一个点击事件。我希望它像一个普通的按钮点击事件。我仍然找不到办法做到这一点。请任何人都可以帮助我。
回答by Esteban
As per CSS3transitions:
根据CSS3过渡：
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
transition-property: Specifies the name of the CSS property to which the transition is applied.
transition-property：指定应用过渡的 CSS 属性的名称。
transition-duration: Defines the length of time that a transition takes. Default 0.
transition-duration：定义转换所需的时间长度。默认 0。
transition-timing-function: Describes how the speed during a transition will be calculated. Default "ease".
transition-timing-function：描述如何计算转换期间的速度。默认“轻松”。
transition-delay: Defines when the transition will start. Default 0.
transition-delay：定义转换开始的时间。默认 0。
One more property to use all the rest:
transition: A shorthand property for setting the four transition properties into a single property.
使用其余所有属性的另一个属性
transition：用于将四个过渡属性设置为单个属性的速记属性。
div
{
transition: width 1s linear 2s;
}
Orif you want to use plain css pseudo-classes:
或者，如果您想使用普通的 css 伪类：
Given this html:
鉴于此 html：
<button>Click me!</button>
Use these pseudo-classes:
使用这些伪类：
button { }
button:hover { background-color: lime; }
button:active { background-color: fuchsia; }
button:focus { background-color: yellow; }
:hoveris when the mouse is over the element.
:hover是当鼠标悬停在元素上时。
:activeis when the element is clicked (and hold).
:active是单击（并按住）元素的时间。
:focusis when you tab to the element.
:focus是当您使用 Tab 键切换到元素时。
Hope it helps!
希望能帮助到你！
回答by johnkavanagh
You have two basic options:
您有两个基本选项：
Use the pseudo-class
:activein your CSS. The element will then transition to the:activestate when clicked (assuming an anchor). Although this isn't necessarily the best bet if you need wide browser-coverage (ie: not supported by older browsers), it is the only option for a pure-CSS implementation.Use JavaScript. Using JavaScript, you can switch the element's class on-click, which will allow you to change the appearance of the element (including any transitions you have set on it). Something like:
$('.selector').click(function(e){ $(this).toggleClass('new-class'); e.preventDefault(); });
:active在 CSS 中使用伪类。然后元素将:active在单击时转换到状态（假设是一个锚点）。尽管如果您需要广泛的浏览器覆盖范围（即：旧浏览器不支持），这不一定是最好的选择，但它是纯 CSS 实现的唯一选择。使用 JavaScript。使用 JavaScript，您可以在单击时切换元素的类，这将允许您更改元素的外观（包括您在其上设置的任何过渡）。就像是：
$('.selector').click(function(e){ $(this).toggleClass('new-class'); e.preventDefault(); });
There is a third - very hacky - option which involves using a sibling form input (a checkbox) and inheriting off it's checkedstate, but it's probably not what you're looking for.
还有第三个 - 非常hacky - 选项涉及使用同级表单输入（一个复选框）并继承它的checked状态，但这可能不是你正在寻找的。
For posterity's sake, here's a Fiddle that demonstrates what I'm talking about (from a previous Stack Overflow question): http://jsfiddle.net/nMNJE/
为了后代，这里有一个 Fiddle 演示了我在说什么（来自之前的 Stack Overflow 问题）：http: //jsfiddle.net/nMNJE/
