html - activate a css transition using javascript - Stack Overflow

admin管理员组

文章数量:1289582

I have an img that I would like to be able to click on and have my

.image_click:active {
  -webkit-transition-duration: 500ms;
  -webkit-transform: scale(1.5);
}

stay scaled! I realize that css alone can't do this, as I achieve the transition when I click, but lose it when I release the mouse button. Is Javascript the solution for this? Is there a css psudoclass that can do this I don't know about?

Here is a better example of what I want to activate

.image_flip { 
  -webkit-animation-name: box_walk; 
  -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-timing-function: linear; 
} 
@-webkit-keyframes box_walk { 0% {} 100% { -webkit-transform:rotateY(180deg); } }

I have an img that I would like to be able to click on and have my

.image_click:active {
  -webkit-transition-duration: 500ms;
  -webkit-transform: scale(1.5);
}

stay scaled! I realize that css alone can't do this, as I achieve the transition when I click, but lose it when I release the mouse button. Is Javascript the solution for this? Is there a css psudoclass that can do this I don't know about?

Here is a better example of what I want to activate

.image_flip { 
  -webkit-animation-name: box_walk; 
  -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-timing-function: linear; 
} 
@-webkit-keyframes box_walk { 0% {} 100% { -webkit-transform:rotateY(180deg); } }

• javascript
• html
• css
• webkit

Share Improve this question Follow edited Jun 27, 2013 at 13:58 pizza247 asked Jun 9, 2010 at 17:02 pizza247pizza247 3,89777 gold badges3535 silver badges4747 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

rather than relying on :active in the style sheet, make a separate class with the transforms.

.image_click_clicked
{
    -webkit-transition-duration: 500ms;
    -webkit-transform: scale(1.5);
}

and then add a js click event handler to your element

<img src="foo.png" class="image_click" 
     onclick="this.className='image_click_clicked';" />

seems to work ok in chrome.

本文标签： htmlactivate a css transition using javascriptStack Overflow