No departure animation employed - Polymer

I am working on a project that involves animating a paper-icon-button with spin and opacity effects when hovering over an image using the on-mouseenter and on-mouseleave events.

Everything works smoothly when hovering over the image, but I am facing an issue where the paper-icon-button simply disappears instead of repeating the animation when the mouse leaves.

Is there anyone who can provide assistance with this?

HTML

<img id="avatar" class="userAvatar" src="../images/hipster.png" slot="item-icon" on-mouseenter="cogSpin" on-mouseleave="cogSpin"></img> 
<paper-icon-button id="cogSpin" icon="settings" class="cog" on-click="doSomething"></paper-icon-button>

CSS

.cog {
    position: fixed;
    color: white;
    top: 129px;
    left: 64px;
    opacity: 0;
    transition: opacity 1s, transform ease-in-out 1s;
    visibility: hidden;
}

.cogOn {
    visibility: visible;
    opacity: 1;
    transform:rotate(360deg);
}

JS

cogSpin : function() {
// css class only applied if the drawer containing it has been expanded
   if(this.$.drawer.classList.contains('drawerExpand')) {
       this.$.cogSpin.classList.toggle('cogOn');
   }
}
javascripthtmlcssanimation

Answer №1

The reason for this is that visibility:hidden; is not a property that can be animated in CSS. (Refer to the developer documentation for more information on interpolation)

To fix this, update your CSS rule to:

.cog {
    position: fixed;
    color: white;
    top: 129px;
    left: 64px;
    opacity: 0;
    transition: opacity 1s, transform ease-in-out 1s;
}

.cogOn {
    opacity: 1;
    transform: rotate(360deg);
}

Since you are already using opacity, the visibility property is unnecessary.

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

Improving the Roman Numeral Kata with JavaScript

As a newcomer to the world of coding, I have taken on the challenge of mastering the Roman Numeral Kata using Javascript. I am pleased to report that all the specifications are passing successfully. After refactoring the spec file, I am now focusing on re ...

javascriptrefactoringjasmineunderscore.jsroman-numerals

Utilizing Vue.js to retrieve database information and populate input fields through select options

In my Laravel 8 and Vue 3 application, I have a Student Component with a datalist that lists all the students. My goal is to populate the input fields with the specific student information when clicking on a student. I attempted to use Vue select, which i ...

javascriptvue.jsvuejs3

Using Jquery to loop through a function for every select box that is added dynamically

Encountering some challenges with jQuery while attempting to utilize the same function and iterate over select boxes that are dynamically generated with jQuery's clone() method. Here is a snippet of the content being cloned: <select name="expense ...

javascriptjqueryhtmlclone

Incorporating a feature that displays one show at a time and includes a sliding animation into an

Hey there! I have this show/hide script on my website that's been working well. However, there are a couple of things I need help with. I want to modify the script so that only one div can be shown at a time. When a div appears, I'd love for it ...

javascriptjqueryhtml

Maximizing the Potential of SSJS ContinueRequest

Is there a way to incorporate ContinueRequest into the script shown below in order to bypass the 2500 limit? <script runat="server"> Platform.Load("Core","1"); try { var DEkey = Request.GetQueryStringParameter(&qu ...

javascriptsalesforce-marketing-cloudssjs

Extracting information from AJAX calls using a DataTable

When it comes to creating CRUD tables in school, I've always used scaffolding per page. However, I recently wanted to experiment with performing all operations without using Partial View. I decided to implement AJAX by following a tutorial on Everyth ...

javascriptjsonajaxasp.net-mvcdatatables

What is the best way to align the elements to the beginning and place the flexbox container in the center

I posted this plunker instead of the previous one. My goal is to align the flex container horizontally while keeping its items aligned at the start. I want to use align-content: flex-start along with justify-content: center. Currently, if the last row h ...

cssflexbox

Is it feasible to access a service instance within a parameter decorator in nest.js?

I am looking to replicate the functionality of Spring framework in nest.js with a similar code snippet like this: @Controller('/test') class TestController { @Get() get(@Principal() principal: Principal) { } } After spending countless ho ...

javascriptnode.jstypescriptdecoratornestjs

AngularJS: Validators in Controller do not directly bind with HTML elements

The in-line validations on the HTML side are functioning properly, but when I utilize functions in my Controller (specifically ingresarNuevoEmpleador and limpiarNuevoEmpleador), the $invalid value is always true. Additionally, $setPristine does not seem to ...

javascripthtmlangularjsvalidation

Is it possible for the r.js optimizer to generate a fresh index.html file that links to the compiled files

After using r.js to optimize my project, I'm wondering how to generate a single index.html file that includes just one optimized script and one CSS file. Would I need to manually write this post-build or is there another way to achieve this? ...

javascriptnode.jsrequirejs

Ways to incorporate sass:math into your vue.config.js file

While using vue-cli with Vue 2.6 and sass 1.49, I encountered errors in the console related to simple division calculations: Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. I attempted to ...

javascriptvue.jswebpacksassvuejs2

Changing the opacity on hover doesn't seem to be working

I currently have a simple dropdown menu where the different menu choices are supposed to change opacity when hovered over. The default opacity is set at 0.5. Below is the hover function in my jQuery code: $('#cat1 > li > a').hover(functio ...

jquerycss

The data sent within an event does not trigger reactivity

Not producing errors, just failing to function. The addition of this also has no impact. input( type="number" v-model="myData" @wheel="wheelIt($event, myData, myMethod)" ) ... methods: { wheelIt ( event, data, func ) { if ( event.deltaY ...

javascriptvue.jseventsmousewheelargs

Learn the process of adjusting opacity for a specific color in CSS

At the moment, this is the code I'm using to apply a color to an element using jss. const styleSheet = theme => ({ root: { backgroundColor: theme.colors.red, }, }) I am interested in finding out if there is a way to add opacity based o ...

javascriptreactjsmaterial-uijss

Tips for anchoring a row to the bottom of a Bootstrap webpage

After working with bootstrap, I am looking to position the last row of the page at the bottom in a fixed and responsive size manner. ...

csshtmlbootstrap-4

Issue with Angular9-MatDatePicker: Unable to establish a connection with 'ngModel' as it is not recognized as a valid attribute of 'input'

Despite my efforts to implement ngmodel binding with matdatepicker, I am still encountering issues, even after reviewing multiple other posts on the topic. Here is a snippet of my HTML: <mat-form-field> <mat-label>Start Date</mat-label ...

htmlangulartypescriptangular-material

The Element should take up the entire page with the exception of a 20px margin

I am struggling to create an element that covers the entire page except for a 20px margin on all sides. I have tried implementing a solution using this code, which works in webkit browsers and Firefox but seems to have issues with Internet Explorer (10) an ...

css

Footnotes integrated directly into the text using only HTML and CSS (in-line notations?)

Instead of appearing below or alongside the main content, notes on FiveThirtyEight expand within or below the paragraph when the note tag is clicked. They could be referred to as "in-notes" instead of footnotes. I personally find this system very efficien ...

htmlcssfootnotes

What is the best way to display changing data in a React component?

Having some trouble with printing data based on the length of an array. Here is my attempted solution, but unfortunately, it's not working as expected. I believe the issue lies in the cb function within the forEach loop. Below is the code snippet: fun ...

javascriptreactjsjsx

What is the best way to remove the empty space on the right side of a webpage while ensuring it remains responsive?

I noticed that there seems to be some extra space on the right side of the layout. I'm not sure how to adjust the Bootstrap code or CSS to fix this issue, or if I need to apply margin 0 or padding 0 somewhere in the code. * { box-sizing: border-b ...

htmlcssbootstrap-5