Trouble with animating card components in my React app slider

In my React app, I have a slider that moves my card components when any of the icon buttons are clicked. I'm trying to implement a fade animation for each card when it is clicked, but currently, the animation only works when the page is reloaded. Here is the snippet of code I am using:


 <div className={classes.root}>
      <div className={classes.slider}>
        <Card image={carddata[slider].image} slider />
      </div>

      <ArrowBackIosIcon
        fontSize="large"
        style={{ left: 0 }}
        className={classes.arrow}
        onClick={prevSlide}
      />
      <ArrowForwardIosIcon
        fontSize="large"
        style={{ right: 0 }}
        className={classes.arrow}
        onClick={nextSlide}
      />
    </div>

Here is the CSS class used for the animation:

 slider: {
    animation: 'fadeeffect 3000ms linear 250ms',
  },

 @keyframes fadeeffect: {
    "0%": {
      opacity: 0,
    },
    "25%": {
      opacity: 0.25,
    },
    "50%": {
      opacity: 0.5,
    },
    "100%": {
      opacity: 1,
    },
  },
javascriptcssreactjscss-animations

Answer №1

If you want to display the image, make sure to include the slider class at the correct time, such as on load instead of on click. To help illustrate this concept, I have included a sandbox example for your reference:

import { useRef } from "react";
const myRef = useRef(null);

const toggleSlider = ()=>{
myRef.current.classList.add('slider');
}

 <div className={classes.root}>

      <button onClick={toggleSlider}>Display Image</button>

      <div /*className={classes.slider}*/ ref={myRef} >
        <Card image={carddata[slider].image} slider />
      </div>

      <ArrowBackIosIcon
        fontSize="large"
        style={{ left: 0 }}
        className={classes.arrow}
        onClick={prevSlide}
      />
      <ArrowForwardIosIcon
        fontSize="large"
        style={{ right: 0 }}
        className={classes.arrow}
        onClick={nextSlide}
      />
</div>

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

Selecting list items using the up and down keys in JavaScript/jQuery

As the search terms dynamically populate a list of items, I am looking for a way to make the list items selectable/focused using the up/down keys and hide the dropdown with ESC key. <form> <div> <div class="field"> & ...

javascriptjquerybootstrap-5popper.js

Storing audio files in Firebase Cloud Database and displaying them in React js + Dealing with an infinite loop problem

Lately, I've been encountering a persistent issue that has proven to be quite challenging. Any assistance would be greatly appreciated. Thank you in advance. The objective is to create a form that allows for the easy addition of new documents to the ...

javascriptreactjsfirebasegoogle-cloud-firestore

What is the correct location to import a custom theme in MUI for Next.js?

I am currently working on a React/Next.js project and I need to customize the colors using MUI. After discovering createTheme(), I realized that the project is written in Typescript. Should I create a separate file with the following code? And where shou ...

reactjstypescriptnext.jsmaterial-uithemes

When using angular.less, the @import feature is functioning correctly but a 404 error is displayed in the

Currently, I am working on a project using AngularJS along with angular.less. To centralize all my constants, I have stored them in one .less file and imported it at the beginning of all my other less files using a relative path: @import "constants" Even ...

cssangularjsless

Redux blankly setting state as null before receiving the actual data

After dispatching an action to store user input in a database, I noticed that a null value is getting appended to the state array in redux, before the actual post data. This unexpected behavior is interfering with my ability to work with the posts array ef ...

reactjsmongodbexpressreduxaxios

Is it possible for Spring Boot to initiate an action that will dynamically update an image in an HTML document using JavaScript or another method?

I am currently facing a challenge in updating an image on a website built with HTML, while utilizing Spring Boot as the backend technology. As of now, I am using JavaScript to update the image at regular intervals, but the timing does not align with when t ...

javascriptjavahtmlspringspring-boot

Guide to successfully verifying the correct value in ReactJS unit tests

I recently designed a reactjs component with an onClick event that modifies text within the component. Here is the code snippet for the component: import React, {Component} from 'react' export default class SimpleComponent extends Component{ c ...

javascriptreactjsunit-testing

Retrieving information through a jQuery ajax call

I've been working on creating an AJAX filter for a car list, but I've hit a roadblock in the final stage. My setup involves two files: index.php and filter.php. Within index.php, I have a form with dropdown lists and sliders. Here's the cod ...

javascriptphpjqueryajax

Prevent fixed div from overlapping with footer

I have been trying to find a solution for my fixed div that sticks to the bottom, but nothing seems to work. My goal is to have the div stop when it reaches the #footer section of the page. Visit the site The CSS currently in place gives the div the cla ...

jqueryhtmlcss

Discovering the exact measurement of "remaining space" in absolute units with flexbox techniques

I am faced with a dilemma that is leaving me uncertain. Within a flexbox layout, specifically column-oriented, there are three children: top, middle, and bottom. The challenge arises in the middle child where I must embed a third-party component that requ ...

htmlcssflexbox

How to Trigger a Child Component Function from a Parent Component in React.js

I want to trigger a function in my child component when a button is clicked in the parent component. Parent Component: class Parent extends Component{ constructor(props){ super(props); this.state = { //.. } } ...

javascriptreactjsmaterial-ui

Looking for a way to make the spinner disappear in puppeteer while waiting?

What is the most effective way to wait for the spinner to vanish before clicking on a button? Check out this example ...

javascriptnode.jspuppeteer

Jersey/Jaxb is providing a result of strings rather than numbers

This is the structure that my jersey service returns: @XmlRootElement(name="chart-data") public class ChartDataDto { private List<Series> series = new ArrayList<>(); public ChartDataDto() { } public void putSeries(St ...

javajavascriptjsonjaxbjersey

What is the method for asynchronously loading a javascript file that includes an ajax call?

Within my JavaScript file named JScript.js, there is a function that includes an AJAX call to a dot-net page. alert('jscript.js called'); function AddTag() { var htag = document.getElementById("hdntag").value.split('|'); var texttag = ...

javascriptasp.netjquery

Two DataTables on a Single Page - Odd Initialization in the Second One

My page contains two dataTable elements and I've created a method as shown below: function ToDataTable() { $(".dataTable").css("width", "100%"); $(".dataTable").each(function () { var $that = $(this); /* Start of custom ...

javascriptjquerydatatables

Option list malfunctioning in Safari, Mozilla, as well as Chrome browsers

I encountered some issues while working on the front-end of my web app. Here are a few problems: I need to truncate text if it's too long, so I use the following CSS: .suggestion-box-text { white-space: nowrap; overflow: hidden; text-overfl ...

javascriptcssangularjsfirefoxsafari

The file could not be located on the server during the project build and upload process

Presently, I'm engrossed in a project involving Angular 9 and ASP Core 3. You can find the website at: Nevertheless, encountering an error when trying to access this URL: http://mag-testcpl.astromap.ir/assets/vendors/global/toastr.css The culprit ...

javascriptangulartypescript

Ways to rearrange an object with javascript

I am looking to restructure my object by removing a nesting. How can I achieve this using JavaScript? Actual: var a = [ { clickedEvents: { 'event-element': 'a', 'event-description': & ...

javascriptjson

Managing user access and permissions using JavaScript on the front end

I find myself in a situation where I am working on developing a single page application: The majority of the operations rely on ajax requests. Depending on the user's login status (admin, regular user, visitor), different components need to be displ ...

javascriptaccess-control

Tips for preventing my text from disappearing off the screen when I resize it

Hello there and thanks in advance. I've recently delved into the world of HTML and CSS and I'm currently in the process of building my own website. I've encountered an issue with a div container where I'm utilizing Bootstrap elements. T ...

htmlcssbootstrap-5