Using Vue to create smooth CSS transitions for video elements, fading in and out

Within my project, there are 4 sets of videos all loading simultaneously, but only one is visible at a time. Users have the ability to switch to the next/previous videos by using arrow keys. I am interested in implementing fade in/out transitions on these videos every time a user moves to the next/previous video.

I attempted to utilize Vue transitions, however, I am unsure how to integrate them with v-show instead of v-if. The challenging aspect is that all videos render only once and are never removed; they simply become hidden. Below is the HTML code for these videos:

<div class="video-container" v-show="currentVideo === 1">
      <video @ended="countLoop" ref="video1" muted autoplay>
        <source src="../assets/videos/video1.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="video-container" v-show="currentVideo === 2">
      <video @ended="countLoop" ref="video2" muted>
        <source src="../assets/videos/video2.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="video-container" v-show="currentVideo === 3">
      <video @ended="countLoop" ref="video3" muted>
        <source src="../assets/videos/video3.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="video-container" v-show="currentVideo === 4">
      <video @ended="countLoop" ref="video4" muted>
        <source src="../assets/videos/video4.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
javascriptcssvue.jsanimationcss-transitions

Answer №1

Indeed, the use of v-show only impacts the CSS "show" attribute, resulting in the component being hidden without being removed from the DOM if the condition is not met. On the other hand, v-if behaves differently by completely removing the component from the DOM tree.

https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show

The distinction lies in the fact that an element with v-show will always be rendered and remain in the DOM; v-show solely manages the display CSS property of the element.

v-if provides true conditional rendering as it ensures that event listeners and child components within the conditional block are properly destroyed and recreated during toggles.

v-if operates lazily: if the initial render condition is false, there will be no action taken - the conditional block will only be rendered once the condition becomes true for the first time.

In contrast, v-show offers a simpler approach - the element is consistently rendered regardless of the initial condition, relying on CSS toggling.

Generally speaking, v-if incurs higher toggle costs whereas v-show entails higher initial render costs. Therefore, opt for v-show when frequent toggling is necessary, and choose v-if when the condition is unlikely to change at runtime.

If you're new to Vue and desire smoother transitions, consider trying out a Vue framework like Vuetify. https://vuetifyjs.com/en/styles/transitions/

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

Unveil the power of the "Enter" key with these jQuery hacks

Is there a way to prevent the Enter key from being counted as a character when disabling the submit button until something is entered in a TextArea? This functionality is achieved using the Count.js.coffee script. $(document).ready -> $(".cmnt_btn") ...

javascriptjquerycoffeescript

Encountering a snag while setting up Google authentication on my website

Currently, I am in the process of integrating Google Authentication into my website. However, I have run into an error related to session management that reads as follows: TypeError: req.session.regenerate is not a function at SessionManager.logIn (C:&bso ...

javascriptreactjstypescriptgoogle-oauth

Obtaining the node generated from a document fragment

Suppose I add a document fragment to the DOM in the following way: const ul = document.querySelector("ul"); const fruits = ["Apple", "Orange", "Banana", "Melon"]; const fragment = new DocumentFragment(); ...

javascripthtml

Having trouble interacting with buttons while an overlay is open

When I try to use the overlay to move the text upwards and reveal buttons, I encounter an issue where I am unable to hover or click on those buttons. As soon as I try to interact with the buttons, the overlay and text come down, blocking my access. I have ...

htmlcssreactjsstylingcss-transforms

Is there a method to directly download large files from the server without having to wait for the blob response?

I'm currently working on video file requests using axios. I have set the requests with responseType: blob to create a video player once the response is received with window.URL.createObjectUrl(). However, I also have a button that allows the user to d ...

javascriptvue.js

Pass a link by pressing Enter

Although the title may seem odd, I'll explain what I'm attempting to accomplish. I have a login form with two input fields, a checkbox, and a submit button. You can view a screenshot of it here: https://i.sstatic.net/nE1FY.png The terms of use a ...

javascripteventsenter

Repetitive series of HTTP requests within a looping structure

Within my AngularJS project, I encounter the need to execute a varying number of HTTP requests in sequence. To achieve this, I believe that utilizing a loop is necessary: for (let i = 0; i < $scope.entities.length; i++) { MyService.createFixedValue ...

javascriptangularjs

Retrieve the information of the currently logged-in user on Discord using next-auth

Can anyone help me with extracting the banner and ID of the currently logged in user? Feel free to reach out at next@12 [email protected] I have successfully logged the profile details at the backend, but I'm facing issues pulling this informatio ...

javascriptnext.js

"Sharing JSON data with the client side using Express and Node.js: A step-by-step guide

I am currently working on an application that requires sending form data through XMLHttpRequest. The process involves validating the form data on the server side and then providing feedback to the client based on the validation result. In this project, I a ...

javascriptnode.jsjsonexpressclient

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...

javascripthtmlcss

Drop-down selection triggering horizontal auto-scroll

Within my div element, I have a table with dropdowns. The div is set up to be horizontally scrollable. To create the dropdown functionality, I utilized Harvesthq Chosen. Let me provide some context. In Image 1, you'll notice that I've scrolled ...

javascriptjqueryhtmlcssharvest

Implementing a feature to dynamically add multiple markers on Google Maps

Currently, I am utilizing the .text() method to extract latng from the html. <div class="latlng"> -33.91722, 151.23064</div> <div class="latlng"> -32.81620, 151.11313</div> As a result, I am using $(latlng).text() to retrieve the ...

javascriptjquerygoogle-maps

Tips for navigating the HTML DOM without using window.scrollBy(x, y) (specifically for scrolling within an element)

Desiring to scroll down along with my selected document, I experimented with the following code. window.scrollTo(x, y); const body = document.getElementsByClassName("body")[0]; body.scrollTo(x, y); However, there are instances where it returns "undefined ...

javascripthtmlcssseleniumdom

Tips on creating adaptable images for mobile viewing

My coding conundrum involves the use of two columns - one for an image and the other for a description of that image. However, when viewing my site on mobile devices, the image is cut off at only half its height. Adjusting both columns to col-sm-6 results ...

javascripthtmlcss

Changing CSS properties dynamically based on database values

Seeking a way to dynamically modify CSS attributes via a database field. Rather than using multiple if statements like the one below: if (@Model["font"] == "arial") //set the font to arial I'd like a cleaner solution that doesn't clutter my vie ...

c#cssasp.net-mvchtmlrazor

Sockets causing a blockage in the Express server

Encountering an issue while setting up an express server with Sockets (using the socketcluster-server module). After sending around 20 http requests, the express server gets blocked, leading to the Sockets (client) reporting a connection depletion. Has an ...

javascriptnode.jssocketsexpresssocketcluster

Utilizing Javascript to interact with GroupMe API through POST method

I've been working on creating a client for GroupMe using their provided API, but I'm stuck and can't seem to figure out what's going wrong. curl -X POST -H "Content-Type: application/json" -d '{"message": { "text": "Nitin is holdi ...

javascriptarraysjsonpost

Making a $.ajax post request with complex JSON that meets CORS compliance

I've been searching on various platforms, including stackoverflow, but I haven't been able to find a solution to my specific issue with CORS. I'm trying to send a complex JSON object (with multiple hierarchies) to a CORS server. I've st ...

javascriptjqueryjsoncors

Experience a dynamic sliding effect when hiding elements with AngularJS using the ng-hide directive and ng

If you take a look at my jsfiddle http://jsfiddle.net/99vtukjk/, you'll see that currently, when clicking on the left or right text, the hide animation moves upwards. Is there a way to change this animation to slide and fade to the left menubar instea ...

angularjscssng-animate

Issue: Child Pages not found in Nuxt RoutingDescription: When navigating

Currently working on a Nuxt application that utilizes the WordPress REST API to fetch content. While my other routes are functioning correctly, I am facing challenges with nested pages. The structure I have implemented in my Nuxt app is as follows: pages ...

javascriptvue.jsvuejs2vue-routernuxt.js