Currently, I am working on a project named Random Quote Machine using React. I am trying to implement some animation transitions when the state in a React Component is being updated. However, I want the animation transition to only affect specific content, not all of it.
Before delving into the issue, here is a snippet of my code:
CSS code:
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,200;0,400;0,600;0,700;1,400&display=swap');
// Various CSS variables and keyframes for animation transitions
React code:
// Implementation of App Parent Component //
class App extends React.Component {
// Working with states and handling animations
}
// Implementation of Quote Box Child Component //
class QuoteBox extends React.Component {
// Rendering quote box content and handling animations
}
ReactDOM.render(<App />, document.getElementById('root'));
If you would like to explore the full code and for better understanding, please visit my Codepen projects here.
Project Explanation: The application triggers fade-in and fade-out transitions whenever the user clicks the new quote button to display new quotes with updated text and background colors.
Issue: In the current implementation, I aim to prevent the white box surrounding the content from following the animation transitions.
Desired Outcome: I aspire to achieve a similar effect as seen in the freeCodeCamp Random Quote Machine example here, where the white box does not undergo the transitions.
I understand this may seem straightforward, but I am facing obstacles in finding a solution. I appreciate your help in providing a resolution. Thank you.