Conceal an element using a transition effect, initiating its positioning at the center instead of the default

Question

Conceal an element using a transition effect, initiating its positioning at the center instead of the default

One of the challenges I'm facing is with a video element that I want to hide gradually when clicking on another element. The issue is that after the animation completes, the video ends up hidden at the top-left corner of the screen instead of at the center where I want it to be. Any suggestions on how I can achieve this?

Please take a look at my code below:

const div = document.querySelector('div');

        window.addEventListener('click', () => {

            div.style.width = '0'
            div.style.height = '0'

        })

div {
            width: 150px;
            height: 150px;
            background-color: blue;
            transition: ease-in-out 2s;
        }

<div></div>

javascript html css

Answer 1

Answer №1

To hide your video element, you can utilize the CSS property scale by scaling it to 0 and then triggering your JavaScript function. Simply assign the class "scale-to-0" to your video element and proceed with hiding it.

div.scale-to-0  {
    -ms-transform: scale(0, 0); 
    -webkit-transform: scale(0, 0); 
    transform: scale(0, 0);
}

Answer 2

To hide your video element, you can utilize the CSS property scale by scaling it to 0 and then triggering your JavaScript function. Simply assign the class "scale-to-0" to your video element and proceed with hiding it.

div.scale-to-0  {
    -ms-transform: scale(0, 0); 
    -webkit-transform: scale(0, 0); 
    transform: scale(0, 0);
}

Answer 3

Answer №2

Have you tested out using margin 0 auto?

const div = document.querySelector('div');

window.addEventListener('click', () => {

    div.style.width = '0'
    div.style.height = '0'

})

div {
    width: 150px;
    height: 150px;
    background-color: blue;
    transition: ease-in-out 2s;
    margin:0 auto;

}

<div></div>

Answer 4

Have you tested out using margin 0 auto?

const div = document.querySelector('div');

window.addEventListener('click', () => {

    div.style.width = '0'
    div.style.height = '0'

})

div {
    width: 150px;
    height: 150px;
    background-color: blue;
    transition: ease-in-out 2s;
    margin:0 auto;

}

<div></div>

Conceal an element using a transition effect, initiating its positioning at the center instead of the default

Answer №1

Answer №2

Similar questions

I can view the data retrieved in the console, but I am having difficulty displaying it on the screen

Guide on merging the root route with child routes using react router v6

The value property or method is not defined on the Vue.js 2 nested component instance

Initiate the command with given parameters

Utilizing the React hook useReducer technique

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

Having difficulty completing the text field and submitting it automatically

What is the best way to pass the index value of a v-for loop as an argument to a computed property function in Vue?

How do I dynamically adjust class names for menu items as I scroll using jQuery?

Is it possible to create a fixed position shader background in three.js?

Tips for addressing the Stale Element Reference Exception when locating an element in JMeter

Unspecified data output from jquery datepicker

Using HTTPS, you can access Flask from AJAX

Having trouble locating the Nativescript-theme-core file for your Nativescript application?

similar element with alternate background shade

inSession variable in express: set to false

It is essential for every child within an array or iterator to possess its own distinctive "key" prop when working in reactjs

Adding and adjusting the size of different DIV elements within a shared area

Is using selectors a more effective way to retrieve computed data compared to using class methods?

Override the default Bootstrap 5 styling for nav-links