0

Lo que estoy tratando de hacer, es que sobre una pantalla(div) donde almaceno todos los objetos(botones y otros elementos...) tenga una transición. Esta transición va a tener dos "cortinas" que realmente son 2 triángulos hechos con un div y estilo bottom. Cuando realice la deformación de la primera cortina izquierda, salió muy bien, no tenía errores, pero cuando quise invertirla y ponerla como cortina derecha con el método "transform: rotate()", esta se cambiaba de posición.

Aquí dejo unos ejemplos de lo que avance y de como quisiera que se vea. Me gustaría que me ayudasen y me digan si es posible realizar lo que deseo.

#1 Probando la cortina izquierda

const btnOpenWindow = document.getElementById("openWin");
const tranLeft = document.getElementById("transitionLeft");
const tranRight = document.getElementById("transitionRight");

// Add Event on click button
btnOpenWindow.addEventListener("click",function(){
    let transition = {
        left: 0,
        right: 0,
        loop: 0,
        dateLoop: "",
    }    
    
    transition.dateLoop = setInterval(windowOpenClose, 5);

    function windowOpenClose(){
        tranLeft.style.borderBottom = `${transition.left}px solid transparent`;
        // tranRight.style.borderBottom = `${transition.left}px solid transparent`;    
        if(transition.loop == 0){
            transition.left += 4;
        }
        if(transition.loop == 1){
            transition.left -= 4;
        }
        if(transition.loop == 0 && transition.left == 600){
            transition.loop = 1;
        }
        if(transition.loop == 1 && transition.left == -1){
            transition.loop = 0;        
            transition.left = 0;
            transition.right = 0;
            clearInterval(transition.dateLoop);
        }
    
    }
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #box{
            background-color: palevioletred;
            width: 800px;
            height: 600px;
        }
        #transitionLeft{
            width: 0;
            height: 0;
            border-left: 800px solid black;
            border-bottom: 0px solid transparent;
            position: absolute;
        }
        #transitionRight{
            width: 0;
            height: 0;
            border-left: 800px solid black;
            border-bottom: 600px solid transparent;
            transform: rotate(180deg);
            position: absolute;
        }
    </style>
    <div id="box">
        <div id="transition">
            <div id="transitionLeft"></div>
            <div id="transitionRight"></div>
        </div>
    </div>
    <br>
    <button id="openWin">Open</button>
   
</body>
</html>

#2 Probando la cortina derecha

const btnOpenWindow = document.getElementById("openWin");
const tranLeft = document.getElementById("transitionLeft");
const tranRight = document.getElementById("transitionRight");

// Add Event on click button
btnOpenWindow.addEventListener("click",function(){
    let transition = {
        left: 0,
        right: 0,
        loop: 0,
        dateLoop: "",
    }    
    
    transition.dateLoop = setInterval(windowOpenClose, 5);

    function windowOpenClose(){
        tranLeft.style.borderBottom = `${transition.left}px solid transparent`;
        tranRight.style.borderBottom = `${transition.left}px solid transparent`;    
        if(transition.loop == 0){
            transition.left += 4;
        }
        if(transition.loop == 1){
            transition.left -= 4;
        }
        if(transition.loop == 0 && transition.left == 600){
            transition.loop = 1;
        }
        if(transition.loop == 1 && transition.left == -1){
            transition.loop = 0;        
            transition.left = 0;
            transition.right = 0;
            clearInterval(transition.dateLoop);
        }
    
    }
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #box{
            background-color: palevioletred;
            width: 800px;
            height: 600px;
        }
        #transitionLeft{
            width: 0;
            height: 0;
            border-left: 800px solid black;
            border-bottom: 0px solid transparent;
            position: absolute;
        }
        #transitionRight{
            width: 0;
            height: 0;
            border-left: 800px solid yellow;
            border-bottom: 0px solid transparent;
            transform: rotate(180deg);
            position: absolute;
        }
    </style>
    <div id="box">
        <div id="transition">
            <div id="transitionLeft"></div>
            <div id="transitionRight"></div>
        </div>
    </div>
    <br>
    <button id="openWin">Open</button>
    
</body>
</html>

#3 Como me gustaria que sea el efectointroducir la descripción de la imagen aquí

Muchas gracias!

1 respuesta 1

1

El problema que tienes es la manera en la que cambia el tamaño la cortina derecha, a como lo tienes si bien el tamaño crece lo hace desde la parte superior del elemento, y tu necesitas que siempre crezca desde abajo.

Para hacer esto puedes usar la propiedad bottom:0 (para anclar la segunda cortina a la parte inferior) y para que esto funcione también debes de asignar a su padre con la propiedad de position:relative.

const btnOpenWindow = document.getElementById("openWin");
const tranLeft = document.getElementById("transitionLeft");
const tranRight = document.getElementById("transitionRight");

// Add Event on click button
btnOpenWindow.addEventListener("click",function(){
    let transition = {
        left: 0,
        right: 0,
        loop: 0,
        dateLoop: "",
    }    
    
    transition.dateLoop = setInterval(windowOpenClose, 5);

    function windowOpenClose(){
        tranLeft.style.borderBottom = `${transition.left}px solid transparent`;
        tranRight.style.borderBottom = `${transition.left}px solid transparent`;    
        if(transition.loop == 0){
            transition.left += 4;
        }
        if(transition.loop == 1){
            transition.left -= 4;
        }
        if(transition.loop == 0 && transition.left == 600){
            transition.loop = 1;
        }
        if(transition.loop == 1 && transition.left == -1){
            transition.loop = 0;        
            transition.left = 0;
            transition.right = 0;
            clearInterval(transition.dateLoop);
        }
    
    }
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #box{
            background-color: palevioletred;
            width: 800px;
            height: 600px;
            position:relative;
        }
        #transitionLeft{
            width: 0;
            height: 0;
            border-left: 800px solid black;
            border-bottom: 0px solid transparent;
            position: absolute;
        }
        #transitionRight{
            width: 0;
            height: 0;
            bottom:0;
            border-left: 800px solid yellow;
            border-bottom: 0px solid transparent;
            transform: rotate(180deg);
            position: absolute;
        }
    </style>
    <div id="box">
        <div id="transition">
            <div id="transitionLeft"></div>
            <div id="transitionRight"></div>
        </div>
    </div>
    <br>
    <button id="openWin">Open</button>
    
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.