css - CSS3 transition click event

Question

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.

Answer 1

根据CSS3过渡：

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

transition-property：指定应用过渡的 CSS 属性的名称。

transition-duration：定义转换所花费的时间长度。默认为 0。

transition-timing-function：描述如何计算过渡期间的速度。默认“轻松”。

transition-delay:定义转换何时开始。默认为 0。

使用所有其余属性的另一个属性： transition：用于将四个转换属性设置为单个属性的简写属性。

div
{
    transition: width 1s linear 2s;
}

或者，如果您想使用普通的 css 伪类：

鉴于此html：

<button>Click me!</button>

使用这些伪类：

button { }
button:hover { background-color: lime; }
button:active { background-color: fuchsia; }
button:focus { background-color: yellow; }

:hover是鼠标悬停在元素上的时候。

:active是单击（并按住）元素的时间。

:focus是当您选择元素时。

希望能帮助到你！

Answer 2

您有两个基本选择：

• :active在 CSS 中使用伪类。然后，该元素将在单击时转换到:active状态（假设是锚点）。尽管如果您需要广泛的浏览器覆盖范围（即：旧浏览器不支持），这不一定是最好的选择，但它是纯 CSS 实现的唯一选择。

• 使用 JavaScript。使用 JavaScript，您可以在单击时切换元素的类，这将允许您更改元素的外观（包括您在其上设置的任何过渡）。就像是：

  $('.selector').click(function(e){
      $(this).toggleClass('new-class');
      e.preventDefault();
  });
  

还有第三个 - 非常 hacky - 选项，它涉及使用同级表单输入（复选框）并继承它的checked状态，但这可能不是您想要的。

为了子孙后代，这里有一个小提琴，它演示了我在说什么（来自以前的堆栈溢出问题）：http: //jsfiddle.net/nMNJE/