Submitted almost 2 years ago

interactive-rating-component-main using HTML CSS and JavaScript

Sujood Qureshi•190

@Sujood-Qureshi

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I was trying to add a transition effect between front-card and thankyou-card.

I have applied the transition CSS property on card-dysign class (in my code) but it didn't work for me.

can you guys help to solve this problem??

Community feedback

Manoj Kumar Singh•970

@dev-mksinghPosted almost 2 years ago

Hey @sujood-qureshi , i'm giving this solution, hope this will help you:

const onSubmit = () => {
    frontCard.style.transform="translate(-100%, 0%)";
    frontCard.style.transition = "transform 0.6s ease-out"
    setTimeout(() => {
        frontCard.classList.add('hidden');
        backCard.classList.remove('hidden');
    }, 500);

}

Hope this will be helpful.

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord