CSS3 переход с Javascript - PullRequest
Новая
       1

CSS3 переход с Javascript

1 голос
/ 01 июня 2011

У меня есть эта веб-страница, на которой при наведении мыши элемент вращается и возвращается в исходное положение при наведении мыши.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Теперь Можно ли вызвать этот переход с помощью JavaScript, а не функции наведения по умолчанию.Я попытался создать два разных имени класса, но это просто не работает, даже если я делаю это, добавляя задержку и изменяя класс.Есть ли вообще сделать такой переход с Javascript ??

Ответы [ 5 ]

3 голосов
/ 01 июня 2011

Я считаю, что все, что вам нужно сделать, - это изменить стиль элемента, который вы хотите изменить, когда происходят определенные события.Кроме того, я изменил DOCTYPE для использования HTML5.Попробуйте: 

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
div.sample1
{
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.sample1:hover
{
width:300px;
}


</style>
<script type="text/javascript">
function doStuff(obj,boolStateChange)
{
    console.log('test');
    if (boolStateChange==true)
    {
    obj.style.cssText = "width:300px;height:100px;background:green;transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;";

    }
    else
    {
    obj.style.cssText = "width:100px;height:100px;background:green;transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;";
    }

}
</script>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div class="sample1"></div>

<p>Hover over the div element above, to see the transition effect.</p>

<br/><br/><br/>

<div id="javaHover" style="background-color:green;width:100px;height:100px;" onMouseOver="doStuff(this,true);" onMouseOut="doStuff(this,false);"></div>

<p>Hover over the div element above, to see the Javascript transition effect.</p>

</body>
</html>
1 голос
/ 01 июня 2011

Вы можете использовать CSSAnimation , которая представляет собой библиотеку JavaScript, которая позволяет запускать анимации с помощью JavaScript, в то же время используя CSS для создания реальной анимации.

Вот пример из документации ( попробуйте ): 

var element = document.getElementById('some-el'),
    transition = new Transition(element),
    transform = new Transform(element);

transition.set({
  property: 'transform',
  'timing-function': 'ease-in',
  duration: '2s'
});

transform.rotate(720).scale(2);
1 голос
/ 01 июня 2011

Не используйте :hover селектор тогда. Использовать события JavaScript.

например:

CSS: 

#box
{
  background-color: steelblue;
  height: 100px;
  width: 100px;
  transition: height 1s, width 1s;
  -moz-transition: height 1s, width 1s;
  -webkit-transition: height 1s, width 1s; 
  -o-transition: height 1s, width 1s;
}

JavaScript: 

 var element = document . getElementById ( "box" ) ;


 element . addEventListener
 (
     "click",
     function ()
     {
         this . style . width = "200px" ;
     }
 ) ;

 element . addEventListener
 (
    "dblclick",
     function ()
     {
         this . style . height = "200px" ;
     }
 ) ;

http://jsfiddle.net/6gSZD/

1 голос
/ 01 июня 2011

Вы можете сделать это: 

document.getElementsByTagName("div")[0].style.width = '300px';

См. скрипка .

1 голос
/ 01 июня 2011

что вы думаете по этому поводу: http://jsfiddle.net/scrRe/?

А вот и вы: http://jsfiddle.net/scrRe/3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...