Creating a seamless transition effect while toggling classes in CSS and JS

Question

Creating a seamless transition effect while toggling classes in CSS and JS

I am looking to create a slideshow that features images with text overlay, and I want to implement next and previous buttons for image navigation. However, I am having trouble getting the opacity transition to work when switching between images by toggling classes. Everything else in the slideshow is functioning correctly, but the transition effect remains elusive. Any help or suggestions would be greatly appreciated! ^^

Below is my current code:

    <section class="featured container section">
        <div class="featured__slides">
          <div class="featured__active featured__item">
            <img class="featured__img" src="/featured/f1.jpg">
          </div>
          <div class="featured__unactive featured__item">
            <img class="featured__img" src="/featured/f2.jpg">
          </div>
        </div>
        
        <div class="featured__arrows">
          <button class="featured__arrow featured__prev">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd" />
            </svg>          
          </button>

          <button class="featured__arrow featured__next">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z" clip-rule="evenodd" />
            </svg>                    
          </button>
        </div>
    </section>

    <style>
    .featured {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    
        position: relative;
    }
    
    .featured__item {
        display: none;
        -webkit-transition: all .3s linear 0s;
        transition: all .3s linear 0s;
        opacity: 0;
    }
    
    .featured__active {
        display: block;
        opacity: 1;
    }
    
    .featured__arrows {
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    .featured__arrow {
        height: var(--size-lg);
        width: var(--size-lg);
        color: var(--clr-cyan400);
    }
    </style>

    <script>
    const nextArrow = document.getElementsByClassName("featured__next");
    const prevArrow = document.getElementsByClassName("featured__prev");
    
    var idx = 0;
    var slides = document.getElementsByClassName("featured__slides");
    var slideshowElements = $(slides).children();
    
    $(nextArrow).click(function () { 
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
        if (slideshowElements.length - 1 == idx)
        {
            idx = 0;
        } 
        else
        {
            idx++;
        }
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
    });
    
    $(prevArrow).click(function () { 
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
        if (idx == 0)
        {
            idx = slideshowElements.length - 1;
        } 
        else
        {
            idx--;
        }
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
    });
    </script>

I have also attempted applying the transition effect to the "featured__img" class without success.

javascript html jquery css css-transitions

Answer 1

Answer №1

It appears that a crucial aspect is missing from your CSS to enable the opacity transition when toggling classes. Let's modify your CSS and JavaScript code to achieve the desired outcome.

To begin, update your CSS classes to incorporate the opacity property:

.featured__item {
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
  opacity: 0; /* Include this line */
}

.featured__item.active {
  opacity: 1; /* Include this line */
}

Your JavaScript code seems fine, but you can streamline it by creating a function to manage the slideshow update logic. Below is the revised version of your JavaScript code:

const nextArrow = $(".featured__next");
const prevArrow = $(".featured__prev");

let idx = 0;
const slides = $(".featured__slides");
const slideshowElements = slides.children();

function updateSlideshow(newIndex) {
  slideshowElements.eq(idx).toggleClass("featured__active");
  slideshowElements.eq(newIndex).toggleClass("featured__active");
  idx = newIndex;
}

nextArrow.click(function () {
  const newIndex = (idx + 1) % slideshowElements.length;
  updateSlideshow(newIndex);
});

prevArrow.click(function () {
  const newIndex = (idx - 1 + slideshowElements.length) % slideshowElements.length;
  updateSlideshow(newIndex);
});

// Set the initial item as active
slideshowElements.eq(idx).toggleClass("featured__active");

For a slightly different approach, you can view a working example at codesandbox.io/s/little-morning-git4i7

Answer 2

It appears that a crucial aspect is missing from your CSS to enable the opacity transition when toggling classes. Let's modify your CSS and JavaScript code to achieve the desired outcome.

To begin, update your CSS classes to incorporate the opacity property:

.featured__item {
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
  opacity: 0; /* Include this line */
}

.featured__item.active {
  opacity: 1; /* Include this line */
}

Your JavaScript code seems fine, but you can streamline it by creating a function to manage the slideshow update logic. Below is the revised version of your JavaScript code:

const nextArrow = $(".featured__next");
const prevArrow = $(".featured__prev");

let idx = 0;
const slides = $(".featured__slides");
const slideshowElements = slides.children();

function updateSlideshow(newIndex) {
  slideshowElements.eq(idx).toggleClass("featured__active");
  slideshowElements.eq(newIndex).toggleClass("featured__active");
  idx = newIndex;
}

nextArrow.click(function () {
  const newIndex = (idx + 1) % slideshowElements.length;
  updateSlideshow(newIndex);
});

prevArrow.click(function () {
  const newIndex = (idx - 1 + slideshowElements.length) % slideshowElements.length;
  updateSlideshow(newIndex);
});

// Set the initial item as active
slideshowElements.eq(idx).toggleClass("featured__active");

For a slightly different approach, you can view a working example at codesandbox.io/s/little-morning-git4i7

Creating a seamless transition effect while toggling classes in CSS and JS

Answer №1

Similar questions

Modifying the $scope property on ng-click and redirecting with ui-sref

Quadruple Equidistant Table Containers

Despite waiting for all promises to resolve, why is the final console.log not displaying the complete data?

Using Typescript to collapse the Bootstrap navbar through programming

It appears that Apexcharts is not compatible with React/Next.js

What is the correct way to end this jQuery statement?

Achieving a full-width navigation element allows for other elements to be positioned below it, rather than directly beside it

What is the best way to transform Adobe XD designs into HTML and CSS with Vue.js?

Troubles arise when utilizing getChannelData to configure socket.io in web audio,

Submitting a Form with Ajax and JQuery in .NET

Formulate a Generic Type using an Enum

Setting up additional requirements in a subfolder within play.js

Module child-process not found

Utilizing Mustache templates to extract JSON data from Contentful

How can JSON be managed on the client side?

What is the most efficient method to extract information from a jQuery script in web.py?

Methods for extracting the date value from a Material UI datepicker?

jQuery now enables the number field to accept not only one period but multiple periods

Is there a way to convert an array of objects with 2 elements into 2 separate arrays?

When the server reloads, an error occurs stating 'CodeMirror' is not defined when using CodeMirror with Vuejs/Nuxtjs