How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?

Currently, I am developing a reviews microservice for an e-commerce platform using react and react-bootstrap. My goal is to showcase 5 reviews initially, followed by a button to expand and reveal more reviews. In order to achieve this, I envision the bottom edge of my review components within the reviewList component to be faded until the user clicks on the expand button.

I found a perfect example on Etsy that captures exactly how I want it to look.

Despite experimenting with various CSS techniques and react-bootstrap, I have been unsuccessful in achieving the desired effect. Specifically, I only want the bottom portion of the entire reviewList component to fade out.

Take a look at this example:

In the example provided, you can see that the bottom of the last review fades out.

Ultimately, my expectation is to keep the bottom area faded until the expand button is clicked. However, all my attempts have only resulted in animating or fading each individual review component.

javascriptcssreactjsreact-bootstrap

Answer №1

To give the container component a unique style, consider adding a pseudo-element to the bottom edge with a background that transitions from transparent to semi-transparent to opaque. You can achieve this by creating a pseudo-element for the container and setting its background-image using a linear gradient with rgba colors (the "a" in rgba represents transparency).

Another option is to create a background with the desired effect in Photoshop and use that as the background image.

<div className="review-list-container">
    <ReviewList />
</div>

.review-list-container::after {
  content: '';
  position: absolute;
  display: block;
  width: 300px;
  height: 100px;
  bottom: 50px;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1)); /
  /* Alternatively, create the desired gradient effect as a PNG in Photoshop */
}

For an example, check out https://codepen.io/Roughton/pen/dBxmdw

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

What is the best way to incorporate a new attribute into an array of JSON objects in React by leveraging function components and referencing another array?

Still learning the ropes of JavaScript and React. Currently facing a bit of a roadblock with the basic react/JavaScript syntax. Here's what I'm trying to accomplish: import axios from 'axios'; import React, { useState, useEffect, useMe ...

javascriptreactjs

A guide to smoothly transition box-shadow with jQuery's addClass() function

UPDATED I have a div with the class .shadow-circle-lg: <div class="shadow-circle-lg"></div> To add a different border styling to the div, I am using another class called .circle-highlight: .circle-highlight{ box-shadow: 0 0 0 1px rgba(0,0, ...

jquerycss

A stylish flyout menu with a sleek li background in jquery

Experimenting with http://tympanus.net/Tutorials/CufonizedFlyOutMenu/, I decided to remove the fly-in descriptions and am now attempting to load the extra li with a style that will "highlight" the li.current-menu-item element. An object is set up as follo ...

javascriptjquery

The beauty of transforming .then notation into an async function in React for a more visually appealing code

Instead of using the fetch().then() notation, I am experimenting with an async function for better readability. Here is the code snippet: fetch("https://api.spotify.com/v1/me", { headers: { Authorization: "Bearer " + accessToken } }) . ...

reactjsfetch-api

After the "div" tag comes the magic of AJAX, PHP, and JAVASCRIPT, replacing

My Ajax implementation is successfully displaying the selected content on a div, but unfortunately, everything that comes after the div is getting replaced by this output. I am unsure of why this is happening and how to resolve it. If you have any insigh ...

javascriptphpjqueryhtmlajax

Creating sophisticated TypeScript AngularJS directive

Recently, I came across a directive for selecting objects from checkboxes which can be found at this link: The issue I'm facing is that we are using TypeScript and I am unsure of how to implement the directive in TypeScript. From what I understand, ...

javascriptangularjstypescriptangular-directive

Can you explain the distinction between ajaxComplete and beforesend when making an Ajax call with JavaScript?

Can you explain the usage of ajaxComplete and beforesend? What sets them apart from each other? Are there any alternative methods similar to success when making an Ajax call? ...

javascriptjqueryajax

The useTranslation function is not functioning properly when used in a client component that is being accessed

Current Versions next-translate: ^2.6.2 next-translate-plugin: ^2.6.2 next: 14.0.3 node: 18.17.1 yarn: 1.22.19 Issue Description: While using the app router in Next.js, I encountered an issue with translation loading. Specifically, when utilizing useTra ...

reactjsnext.jsnext.js13next-translate

Exporting ExpressJS from a TypeScript wrapper in NodeJS

I've developed a custom ExpressJS wrapper on a private npm repository and I'm looking to export both my library and ExpressJS itself. Here's an example: index.ts export { myExpress } from './my-express'; // my custom express wrap ...

javascriptnode.jstypescriptexpressnpm

Can the keydown event have an impact on setInterval functionality?

I created a basic snake game using JavaScript and attempted to incorporate a new feature where var trail = []; var tail = 5; var normal_speed = 1000 / 10 var speed = 1000 / 10; var game_status = 0; var my_game; button.addEventListener("click", function ...

javascripthtml

New and improved method for showcasing the switching of two PHP variables using jQuery Ajax

Obtaining two random values from a table in the same row can be achieved using PHP and MySQL. For example: <?php $result = mysql_query("SELECT * FROM people ORDER BY RAND() LIMIT 1", $connection); $row = mysql_fetch_array($result); echo $ro ...

phpjavascriptjqueryajax

Problems with Ajax calls are preventing Internet Explorer9 and Internet Explorer10 from functioning properly

I am facing an issue with displaying item pages using Ajax. The function works perfectly in Chrome, but not in Internet Explorer. <script type="text/javascript"> function obtainInfo(str) { if (str=="") { document. ...

javascriptajaxinternet-explorer-9

Implementing IBAN as the default option in Stripe's PaymentElement

The functionality of the react-stripe-js library's IbanElement includes various options such as supportedCountries and placeholderCountry: <IbanElement ... options={{ supportedCountries: ["SEPA"], placeholderCountry: "DE& ...

javascriptreactjsstripe-paymentsstripe-payments-js

What are effective strategies to stop the generic * { … } style from overriding its parent tag?

How can I prevent my general * { ... } style from overriding the parent tag? In the given scenario, I want the text "sssssssss" to have the style text-huge. .text-huge { font-size: 28px !important; color: green !important; } * { font-size: 12px; ...

htmlcss

What is the reason behind the inconsistency in how the first SetState always impacts the state in React Native, while

When using setState inside componentDidMount() to set the state of variables, I encountered an issue where the first setState seems to always take precedence over the second one. This means that no matter what order I place them in, the variables end up ...

reactjsreact-nativejsx

Unable to retrieve data from a localhost server to a different one

I have both a Webpack server for React (located at localhost:3000) and an Express server (found at localhost:4000). I followed the instructions to set up a proxy in my package.json file but it's still not working. Additionally, I tried setting headers ...

reactjsexpressproxylocalhostpackage.json

What is the best method for distributing this array object?

I am faced with the task of spreading the following object: const info = [{ name: 'John', address: 'america', gender: 'Male', job: 'SE' }]; I want to spread this array object and achieve the following format: form:{ ...

javascriptreactjsspread

Enhancing Website Visibility: Utilizing PHP and JQuery to Update Page Content for Viewers

Imagine having a social networking platform where users can post updates and see them appear in real-time on their timeline. The challenge arises when these updates are only visible to the user currently logged in on a specific device. How can we utilize j ...

javascriptphpjqueryhtmlajax

Vue: Load page content only after the route change is complete

Every time I visit a new route within the current session, I notice that the page loads and then takes about 2 seconds for the styles to be applied. This delay causes what is commonly known as CSS flashing or FOUC (Flash of Unstyled Content), which ultimat ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Combining ng-repeat with manipulating the DOM beyond the scope of a directive

I'm struggling to understand Angular Directives and how they work. I have a simple array of objects in my controller, but creating the desired DOM structure from this data model is proving challenging. Any advice on best practices would be greatly app ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat