Вызов функции setInterval и стиль html без изменений? - PullRequest
Новая
       0

Вызов функции setInterval и стиль html без изменений?

0 голосов
/ 24 марта 2020 
<style>
        .a {
            width: 500px;
            height: 300px;
            background-color: #666;
        }

</style>

<body>
    <div class="a">

    </div>

    <script>
        function first() {

            setInterval( a, 1000);
        }

        function a() {
            document.getElementsByClassName('a')[0].style.transform = 'rotate(50deg)';
            document.getElementsByClassName('a')[0].style.transform = 'rotate(90deg)';
        }

        window.addEventListener('load', first);
    </script>
</body>

https://jsfiddle.net/TyTyT/frmawt85/

Я нашел остановку стиля преобразования на 90 градусов, больше не меняюсь.

Я думаю, что тег DIV будет перемещаться между 50 градусов и 90 градусов.

Как это сделать?

Ответы [ 3 ]

1 голос
/ 24 марта 2020

Пожалуйста, проверьте это решение. Я думаю, что вы пытаетесь вернуть обратно значение и снова запустить l oop как маятник, если это так, то я надеюсь, что это решение поможет. 

.as-console-wrapper {
  max-height: 20px !important;
}
.a {
  transition: all 1s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            /* border: 1px solid red; */
            background-color: red;
            margin: 40px auto;
        }

</style>

</head>
<body>
    <div class="a">

    </div>

    <script>
    	let rotate = 60;
        function first() {
            let interval;
            // Don't forget to clear the interval
	          if (interval) clearInterval(interval);
            interval = setInterval( a, 1000);
            
        }

        function a() {
            if(rotate === 60) rotate += 60;
            else rotate -= 60; 
            console.log(rotate);
            document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`;
        }

        window.addEventListener('load', first);
    </script>
</body>
</html>
1 голос
/ 24 марта 2020

Это на самом деле вращается. Вам необходимо своевременно обновить значение rotate. Вы можете попробовать это - 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            /* border: 1px solid red; */
            background-color: red;
            margin: 40px auto;
        }

</style>

</head>
<body>
    <div class="a">

    </div>

    <script>
    	var rotate = 0;
        function first() {
            let interval;
            // Don't forget to clear the interval
	    if (interval) clearInterval(interval);
            interval = setInterval( a, 1000);
            
        }

        function a() {
        	if (rotate > 360) rotate = 0;
        	rotate += 50;
            document.getElementsByClassName('a')[0].style.transform = `rotate(${rotate}deg)`;
        }

        window.addEventListener('load', first);
    </script>
</body>
</html>
0 голосов
/ 24 марта 2020

Вы вызываете оба изменения CSS вместе в одной функции (а), и эта функция запускается каждую секунду. Так и происходит, но очень быстро друг за другом.

То, что вы можете сделать в этом очень простом случае, выглядит примерно так: 

function first() {

    const degs = ['rotate(50deg)', 'rotate(90deg)'];

    setInterval(() => {
        document.getElementsByClassName('a')[0].style.transform = degs[0];
        degs.reverse();
    }, 1000);
}

window.addEventListener('load', first);

Это работает, но ... Я бы использовал CSS анимации здесь. Было бы что-то вроде этого, и это даст приятное прикосновение смузи: 

<style>
    .a {
        width: 500px;
        height: 300px;
        /* border: 1px solid red; */
        background-color: #666;

        animation: exampleAnimation 2s infinite;
    }

    @keyframes exampleAnimation {
        0% {
            transform: rotate(50deg);
        }
        50% {
            transform: rotate(90deg);
        }
        100% {
            transform: rotate(50deg);
        }
    }
</style>

Подробнее о CSS анимациях можно прочитать здесь:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

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

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

...