Sliding Tab Animation using solely CSS on Flexbox

Question

Sliding Tab Animation using solely CSS on Flexbox

I've been challenged with developing my own React Tabs component that includes a sliding animation, similar to what you see in mui or ant design.

I can achieve this using JavaScript, however, the limitation is that I cannot use CSS within JavaScript or inline CSS. Therefore, it must be purely SCSS / CSS in a Next.js project. Another complication is that the tabs need to be responsive (without fixed width), so the container is set to flex and can contain multiple tab items with varying widths. This makes it challenging to determine the item's width using pure CSS alone.

Is it feasible to create such an animation without relying on any JavaScript?

javascript css flexbox

Answer 1

Answer №1

I am here to assist you.

It seems like you need to develop a separate functional component called Tabs.

You can specify the appropriate styles in each component.

1. Approach involving styling as components:

Here is an example of how you can define styles using styled components:

import styled from 'styled-components'

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

export default function Example(){

  return(
    <div>
      <Wrapper>
        <Title>
          Hello World!
        </Title>
      </Wrapper>
    </div>
  )
}

Refer to the documentation on how to use styled-components effectively.

2. Second Option: basic CSS styling

You can create a global.css file to store all your CSS styles, as outlined here.

3. Explore various examples of Tab sliders available online. (For instance, you can refer to this)

If you are considering a "pure css project", keep in mind that NextJS will transform all your pages into either .js or .tsx; hence, you cannot solely use pure HTML and CSS without transformation into .js.

Attempting to avoid using .js within a JavaScript/TypeScript framework may lead to issues, as different browsers have their own interpretation of CSS properties. You can refer to this table for more information.

Answer 2

I am here to assist you.

It seems like you need to develop a separate functional component called Tabs.

You can specify the appropriate styles in each component.

1. Approach involving styling as components:

Here is an example of how you can define styles using styled components:

import styled from 'styled-components'

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

export default function Example(){

  return(
    <div>
      <Wrapper>
        <Title>
          Hello World!
        </Title>
      </Wrapper>
    </div>
  )
}

Refer to the documentation on how to use styled-components effectively.

2. Second Option: basic CSS styling

You can create a global.css file to store all your CSS styles, as outlined here.

3. Explore various examples of Tab sliders available online. (For instance, you can refer to this)

If you are considering a "pure css project", keep in mind that NextJS will transform all your pages into either .js or .tsx; hence, you cannot solely use pure HTML and CSS without transformation into .js.

Attempting to avoid using .js within a JavaScript/TypeScript framework may lead to issues, as different browsers have their own interpretation of CSS properties. You can refer to this table for more information.

Sliding Tab Animation using solely CSS on Flexbox

Answer №1

Similar questions

Storing a boolean value in MongoDB as a string

What is the best way to determine the number of connections in Redis when using Node.js?

Try implementing a dynamic id to modify the background when hovering over the menu in the DAWN THEME

In this JavaScript tool for counting characters, every carriage return is counted as two characters

I am endeavoring to send out multiple data requests using a function, ensuring that the code execution occurs only once all the results have been received

Using CSS to center the text and adding a separator line in blank spaces for a clean and stylish look

Attempting to implement a feature that will enable a blank row at the end of an input table with the help of

Angular JS basic API: Displaying only information that starts with the term 'request'

Unable to find custom components when using react-router

Which is causing the block: the event loop or the CPU?

Encountering a problem involving the apostrophe character "'" when trying to save content into a MySQL database

Events are causing the Three.js canvas to resize

The Label in Material UI TextField is appearing on top of the border,

The Hover Hover textbox stays in place once clicked on

Experimenting with a loader component in AngularJS

What are the steps for transitioning with JavaScript?

Deactivate click events in the container div

How can you force a line break on an inline-block element with CSS, after a specific number of elements?

What are the best ways to incorporate EMs and percentages into responsive web design?

Tips for sending multiple values as a unified object using Javascript and Ajax