Linaria not used to animate React component

I'm facing an issue with a component that needs its width to change based on props.

The style for the component is as follows:

  const SidebarContainer = styled.div`
    width: ${props.isOpen ? 340 : 73}px;
    height: 100vh;
    background-color: ${colors.white100};
    padding-left: 30px;
    padding-top: 17px;
    overflow: hidden;
    position: fixed;
    transition: all 0.5s ease;
`

Although I have specified a transition, the styles are changing abruptly without the transition effect. I attempted to use data attributes, but it didn't work as expected. How can I resolve this issue?

cssreactjsanimation

Answer №1

My solution involved using the styled-tools library along with ifProp for conditional styling.

import { ifProp } from 'styled-tools';

const SidebarContainer = styled.div<{ isOpen: boolean }>`
  width: ${ifProp('isOpen', 34, 7.5)}rem;
  height: 100vh;
  background-color: ${colors.white100};
  padding-top: 1.7rem;
  overflow: hidden;
  position: fixed;
  transition: all 0.3s ease;
  border-box: box-sizing;
`;

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

Ways to resolve the issue of incompatible parameters 'action' types in JavaScript

I'm encountering a common problem, but I can't figure out why this error is happening. After updating redux, I encountered the following error message: TS2322: Type '(state: ILanguage | undefined, action: PayloadAction<ILanguage>) =&g ...

reactjstypescriptreact-redux

callback triggering state change

This particular member function is responsible for populating a folder_structure object with fabricated data asynchronously: fake(folders_: number, progress_callback_: (progress_: number) => void = (progress_: number) => null): Promise<boolean ...

javascriptreactjstypescriptoop

Sending a function to a nested component

Just starting out with React and I am trying to pass information from a child component to a parent component: Parent: export default function App() { const [isLoading, setisLoading] = useState(false); return ( <div className="App"&g ...

reactjs

Is there a way to monitor network requests (for debugging purposes) in React Native specifically on a Windows platform?

I've come across several solutions about viewing network requests in React Native on Mac OS, but I need help with debugging on Windows. Can anyone guide me on how to achieve this? ...

reactjsreact-nativedebuggingreduxreact-devtools

What is the process for incorporating color into component tags within Visual Studio Code?

As I dive into learning React, I’ve noticed that some individuals use different colors for Component tags compared to regular HTML tags when using JSX syntax. Despite trying extensions like prettier and react snippets, I haven’t been able to replicate ...

reactjsvisual-studio-code

How can I delete a video on mobile in WordPress?

Looking for some assistance with my webshop www.spidercatcher.dk. I'm trying to have a background video display only on PCs, while showing a still photo on phones and tablets. I've tried using a poster tag but I can't seem to scale it proper ...

htmlcsswordpresswoocommerce

JavaScript - Unable to unselect a button without triggering a page refresh

I have a series of buttons in a row that I can select individually. However, I only want to be able to choose one button at a time. Every time I deselect the previously selected button, it causes the page to reload when all I really want is for all the but ...

javascripthtmlcss

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

What is causing the recurring 500 (Internal Server Error) when trying to fetch the favicon.ico from http://localhost:3000?

Despite not keeping anything from the CRA files generated by this project, I am still receiving an error. Where is it coming from? GET http://localhost:3000/favicon.ico 500 (Internal Server Error) I have created my own ./public/index.html file without sp ...

reactjsexpresscreate-react-app

The File Reader just informed me that parameter 1 is not in the form of a blob

When working with a file input in my React component, I keep encountering an error with the FileReader. Here's the specific error message: Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not o ...

javascriptreactjsfilereader

Creating a line break in HTML using Bootstrap

Reference the source provided, specifically the red alert option. Here is an example: <div class="alert alert-dismissible alert-danger"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong> ...

htmlcsstwitter-bootstrap

The component is not being displayed due to issues with nested routing

When attempting to display the CollectionPage Component from the ShopPage component as a nested route that receives match as a param, I encountered an issue where the page was empty and displayed an error message. The collection page was not rendering with ...

reactjsreact-routerreact-router-domnested-routes

React-Router Refreshes Component When Moving To Another Route

I am currently in the process of familiarizing myself with React and Redux. My current setup involves the following: Within the store's state, there is a property named 'activeAction' which stores a number value. The 'activeAction&apos ...

javascripthtmlreactjsreduxreact-router

Adding a layer to an HTML element causes CSS to malfunction

I am encountering an issue with my HTML code. Initially, it looks like this: <div style=" display: grid; grid-template-columns: 200px 200px 200px;"> <button style="width:100%; height:100%" *ngFor="let valu ...

htmlcssangular

Identifying sluggish hardware or unresponsive browsers using JavaScript

My site features numerous CSS animations and transitions that run very slowly on specific browsers and older hardware. I want to avoid user-agent sniffing; is there a way to identify browsers or hardware configurations using JavaScript or a JS library, and ...

cssbrowserjavascript

What is the best way to halt Keyframe Animation once users have logged in?

To enhance user engagement, I incorporated keyframe animation into my login icon on the website. The main objective is to capture the attention of visitors who are not registered users. However, once a user logs in, I intend for the keyframe animation to c ...

javascriptcsscss-animationskeyframe

CSS positional sequencing dilemma

I am having trouble with the layout in this particular scenario: . In the #boxOne div, I have a link followed by a div (#formloc) containing an input and another link. Even though the first link ("Appliquer une localisation") is placed before the #formlo ...

css

Bootstrap tab toggle feature

I'm currently facing an issue with Bootstrap's tab component. I need help figuring out how to hide a lorem ipsum section and show a hidden div when a specific tab is clicked, and then revert the changes when a different tab is selected. $(func ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide to creating draggable text on a video with HTML

I have a challenge where I need to overlay text on a video and make it draggable across the entire video. Currently, I am able to display the text over the video successfully, but when I try to drag it and then drop it, the text appears below the video and ...

javascripthtmlcssreactjs

The header will not display the text

I can't seem to get the href buttons to align properly in the header. I tried adjusting the margin-top, but it didn't work as expected. Being a beginner in CSS, I'm unsure of what code to use next. Any help would be greatly appreciated. Als ...

htmlcssbuttonheaderhref