"Spin an image using Javascript when it is shown on the

I've got a script that shows an image when we are attacked by a monster. The image is initially set to display="none", but switches to display="" when a monster appears.

What I'm looking to do is make the image rotate 360° when it changes from display:none to display.

Here's the HTML: 

<img id="monster" style="display:none;">

And here's the JavaScript: 

var skinMonster = document.getElementById('monster');

During a fight, I use skinMonster.style.display="";

Once the battle is over, I use 

skinMonster.style.display="none";

The challenge I'm facing is detecting the moment when the style changes so I can animate the picture rotation.

javascriptcssimageeventsrotation

Answer №1

One suggestion is to include a CSS class when you are adjusting the display.

.rotate {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);

    overflow:hidden;

    }

This code snippet has been adapted from a blog post, which you can find here:

Answer №2

If you're looking to add some flair to your website, I suggest implementing a CSS transition for the rotation effect.

HTML

<img id="monster" src="http://www.avatarsdb.com/avatars/mike_monsters_inc.jpg" />
<button id="show">Show monster</button>

CSS

#monster {
    opacity: 0;
    transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
}

#monster.show {
    opacity: 1;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

JavaScript

var monsterImg = document.getElementById('monster'),
    showMonsterButton = document.getElementById('show');

showMonsterButton.addEventListener('click', function() {

    monsterImg.classList.add('show');

});

For a live demonstration, check out this JSFiddle link: http://jsfiddle.net/9wkA7/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message in Material-UI TextField not displaying when state is updated using Object.assign technique

Currently, I am facing an issue with validating a login form and displaying errors dynamically. These errors are passed as props from the child component. The problem arises when I set the errors object using Object.assign - the errorText does not show up ...

javascriptreactjsmaterial-ui

What is the method for setting the content-type in an AJAX request for Android browsers?

I am facing an issue with my ajax call to the Rails server. The response from the server varies between HTML and JSON based on the content type. Surprisingly, this works smoothly on iPhone and desktop browsers like Chrome, but I am encountering a problem o ...

javascriptandroidajaxjson

Confusion arises between Bootstrap button plugin and Vue checkbox click event

After incorporating bootstrap.min.js into my Vue app, I noticed that the checkboxes' @click event is no longer triggered. This issue specifically occurs when using bootstrap's button-group with data-toggle="buttons". If I remove bootstrap.min.js, ...

javascripttwitter-bootstrapvue.jsdom-events

Encountering an issue with setting up Pinia in Vue3, as it is showing an error message stating "

I am facing a challenge with my Vue app where the normal reactive store is not working correctly and does not retain the values I have set. Hence, I would like to switch to a Pinia store. After installing Pinia, my main.js file looks like this: import { cr ...

javascriptvue.jsvuejs3pinia

I'm puzzled as to why the color isn't showing up on my navigation bar even though I used "padding: 10px !important;"

I really need help with this, I'm quite new to all of this and it's really confusing me. When I remove this line, the color shows up again, but when I add it back in, it just disappears. I've been following a tutorial on YouTube on how to cr ...

htmlcss

What is the best way to insert a new item into an array that is nested within an object?

Currently, I am delving into the world of using $resource in angularjs and finding great examples in this answer AngularJS $resource RESTful example. Fetching and creating records is working fine, but now my challenge lies in adding a "section" to an exist ...

javascriptangularjsmongodbmean-stack

Error encountered when attempting to retrieve data from a JSON object

I'm in the process of extracting some information from a JSON object, but I've encountered a confusing issue. The JSON object structure is as follows: { "status": "success", "data": { "image": null, "video": null, "author": null, "publisher": "M ...

javascriptjsonreactjsobject

Navigating Next.js: Mastering the art of localStorage Access

Currently, I am developing my first member area using next.js. My goal is to store some data in localStorage (such as token, expiresAt, userInfo), which will eventually be moved to an http-only cookie. The code below is generating the error: "LocalStorage ...

javascriptauthenticationlocal-storagenext.js

The de-duplication feature in webpack is not functioning properly when the splitChunks cacheGroups commons option is activated

In my lerna project, I have two identical packages named p1 and p2. Both p1 and p2 utilize a 3rd party package - in this case, eosjs@beta, which is approximately 50KB in size. When I incorporate p1 into an example react project, the package size increase ...

javascriptnpmwebpacklerna

Transforming a file with a node module that lacks a .js class into a browseable format

I am currently working on browserifying my module. One of the dependencies I have is on this https://www.npmjs.com/package/chilkat_win32. It is present in my node_modules folder and here is how the structure looks: https://i.stack.imgur.com/uw9Pg.png Upo ...

javascriptnode.jsnpmbrowserifynpm-install

Discover the art of customizing child elements using vanilla extract!

I recently started using vanilla extract to add styles to a NextJS application. Is there a way to style child elements within the parent element without having to create another class? My React component has a structure like this: <ul className={style ...

cssnext.jsvanilla-extract

What causes certain files to sporadically duplicate themselves in Visual Studio Code?

While using vscode for NodeJS development, I have noticed that certain files seem to duplicate themselves sporadically. Why is this happening and what steps can I take to resolve it? I am unsure of how to tackle this issue... ...

javascriptnode.jsvisual-studio-codetailwind-cssvscode-extensions

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

Is it possible to restrict HTML5 Drag & Drop functionality between different browsers or windows? I am currently working on an Angular2 app that utilizes native HTML5 Drag and Drop feature. Is there a way to prevent users from dragging items out of th ...

javascriptangularhtmldrag-and-drop

Tips on navigating to a URL with a component in React without losing the passed props

When the onClick event is triggered, I aim to redirect to a new component with props passed to it along with a new URL. My App.js import React from "react"; import Main from "./Components/Main/Main"; import "bootstrap/dist/css/boo ...

javascriptreactjsreact-router-dom

Enhancing Javascript with ES6 for nested for loop operations

Hey there, I have a question about converting a nested for loop into an Array map/ES6 way. How does that work when dealing with nested for loops? for (var i = 0; i < enemy.ships.length; i++) { for (var n = 0; n < enemy.ships[i].locat ...

javascriptarraysnode.jsfunctional-programmingecmascript-6

When Select2 doesn't find a suitable option, the text "other" will be displayed

Is it possible to show a default option in select2 dropdown if the user's typed input does not match any available options? $("something").select2({ formatNoMatches: function(term) { //return a predefined search choice } }); I have searched ...

javascriptjqueryjquery-select2

Creating with NodeJS

I'm encountering an issue where my code is not waiting for a response when trying to retrieve data from a database. The connection is fine and everything works well, but Express isn't patient enough for the data to come through. Despite trying v ...

javascriptnode.jsexpressnode-async

Ajax: The function assigned to the route does not get executed

Pressing a button triggers a confirmation box. If 'ok' is clicked, the div called 'EventData' should display the word 'reached'. The confirmation box appears when the button is clicked, but 'EventData' does not show ...

javascriptphpajaxlaravel

Having trouble getting the show/hide div feature to work in a fixed position on the

Trying to show/hide a div using jQuery isn't working when the div is wrapped in a position:fixed element. However, changing it to position:relative makes the show/hide function work again. You can see an example of the working version with position:r ...

jquerycss

Link an image to a specific row in a PHP database

Currently, I am faced with a challenge of displaying images from a folder where each image is associated with a unique "productid" in my database. My project involves working with PHP to achieve this task. <?php require('connection.php'); ...

phpimage