CODEWITHSUNDEEP
javascriptcss
alexanne
alexanne

Reputation: 161

How to make animation on click only?

I made a small animation When clicked, the animated square will change its height, but it will also animate when the window size / scale is changed. How to make it animate only when clicked, and in other cases just resize (no animation)

    function myClick() {
        document.getElementById("myDiv").style.height = Math.floor(Math.random() * 100) + "vmin";
    }
#myDiv {
        width: 20vmin;
        height: 20vmin;
        background: green;
        transition: height 1s ease;
    }

    #myDiv:active {
        background: blue;
    }
<!DOCTYPE html>

<body>
    <div id="myDiv" onclick="myClick()"></div>
</body>
</html>

Upvotes: 0

Views: 324

Answers (3)

user2740650
user2740650

Reputation: 1753

Here's one way. It's a bit crude but it works. The div only has an animate class while the animation is taking place, using a timer. I made the timer longer than necessary and it turns yellow to make clear what's happening. I'm not sure if it can be done without a timer kludge.

    let animateTimeout;
    function myClick() {
        let myDiv = document.getElementById("myDiv");
        myDiv.style.height = Math.floor(Math.random() * 100) + "vmin";
        myDiv.classList.add("animate");
        clearTimeout(animateTimeout);
        animateTimeout = setTimeout(() => myDiv.classList.remove("animate"), 1500);
    }
    #myDiv {
        width: 20vmin;
        height: 20vmin;
        background: green;
    }
    #myDiv.animate {
        background: yellow;
        transition: height 1s ease;
    }

    #myDiv:active {
        background: blue;
    }
<!DOCTYPE html>

<body>
    <div id="myDiv" onclick="myClick()"></div>
</body>
</html>

Upvotes: 0

vanowm
vanowm

Reputation: 10201

One method is to add a class with transition and remove it after animation finished:

var timer;
document.getElementById("myDiv").addEventListener("transitionend", function(e)
{
    clearTimeout(timer);
    document.getElementById("myDiv").classList.toggle("clicked", false);
}, false);

function myClick() {
    clearTimeout(timer);
    document.getElementById("myDiv").classList.toggle("clicked", true);
    document.getElementById("myDiv").style.height = Math.floor(Math.random() * 100) + "vmin";
    timer = setTimeout(function() { //backup plan
        document.getElementById("myDiv").classList.toggle("clicked", false);
    }, 2000);
}
#myDiv {
    width: 20vmin;
    height: 20vmin;
    background: green;
}

#myDiv:active {
    background: blue;
}
#myDiv.clicked {
    transition: height 1s ease;
}
<body>
    <div id="myDiv" onclick="myClick()"></div>
</body>

Another method is to remove transition class when window is resized

function myClick() {
    document.getElementById("myDiv").classList.toggle("clicked", true);
    document.getElementById("myDiv").style.height = Math.floor(Math.random() * 100) + "vmin";
}

window.addEventListener('resize', function() {
    document.getElementById("myDiv").classList.toggle("clicked", false);
});
#myDiv {
    width: 20vmin;
    height: 20vmin;
    background: green;
}

#myDiv:active {
    background: blue;
}
#myDiv.clicked {
    transition: height 1s ease;
}
<body>
    <div id="myDiv" onclick="myClick()"></div>
</body>

Upvotes: 2

İlker
İlker

Reputation: 2090

The only way I know is the listening window resize event.

We are removing the transition effect while resizing in here;

const myDiv = document.getElementById("myDiv")

window.addEventListener('resize', () => {
myDiv.style.transition = "all 0s ease 0s"
});

But then you have to put the transition back when you click like this;

function myClick() {
if(myDiv.style.transition === "all 0s ease 0s"){
  myDiv.style.transition = "height 1s ease";
 }
    myDiv.style.height = Math.floor(Math.random() * 100) + "vmin";
    }

Upvotes: 0

Related Questions