0
326
ViewsDespliegue del efecto de transformación div
Tengo una lista de usuarios, aprobados y en espera de aprobación. A eso necesito agregar el botón en la parte inferior que despliega la lista de usuarios archivados, además de las listas de aprobados/en espera de aprobación. Debería dar la transición como un componente plegable: plegar/desplegar el div encima del anterior. Y no sé por dónde empezar. Lo más obvio que hacer es:
<div class="approved_users"> </div> <div class="archive" style="display: none"> </div> <button type="button" id="show_archive" onclick="myFunction()">Show archive</button> function myFunction() { var archive = document.getElementById("archive"); var app = document.getElementById("approved_users"); if (archive.style.display === "none") { archive.style.display = "block"; app.style.display="none"; } else { archive.style.display = "none"; app.style.display="block"; } }Pero no sé cómo lograr el efecto de transformación "desdoblado". ¿Me podrían ayudar?
1 answers
Answer question0
El efecto de plegado al pasar el mouse es bastante simple. Para el HTML, todo lo que necesita agregar es un botón en una barra de navegación, así como una lista con los elementos (en su caso, las cuentas aprobadas y las cuentas en espera de aprobación).
<nav> <li class="hov">Approved Accounts <ul class="main"> <li>Crystal Bell</li> <li>Frederick Adams</li> <li>Add</li> <li>More</li> </ul> </li> </nav>Sin embargo, la mayor parte de este efecto está en css. Le demuestro el efecto en esta demostración (solo HTML y CSS):
ul,li{ margin: 0; padding: 0; } .main{ position:absolute; z-index:1; } .main li{ list-style:none; background: blue; width:100px; padding: 0 5px; border: 1px solid black; height: 30px; line-height: 30px; -webkit-transition: all .5s ease-in-out; } .main li:nth-child(odd){ -webkit-transform-origin: top; -webkit-transform: perspective(350px) rotateX(-90deg); } .main li:nth-child(even){ margin-top:-65px; -webkit-transform-origin: bottom; -webkit-transform: perspective(350px) rotateX(90deg); } .hov:hover li:nth-child(odd){ -webkit-transform-origin: top; -webkit-transform: perspective(350px) rotateX(0deg); margin-top:0; } .hov:hover li:nth-child(even){ -webkit-transform-origin: bottom; -webkit-transform: perspective(350px) rotateX(0deg); margin-top:0; } .main li:first-child{ margin-top:0; } .hov{ position:relative; height: 40px; width:112px; background: green; color: white; font-size: 13px; font-family: Helvetica; font-weight:bold; text-align: center; line-height: 40px; list-style:none; z-index:2; } <nav> <li class="hov">Approved <ul class="main"> <li>Crystal Bell</li> <li>Frederick Adams</li> <li>Add</li> <li>More</li> <li>To</li> <li>This</li> <li>List!</li> </ul> </li> </nav>Como puede ver aquí, este código css funciona para cualquier cantidad de elementos de la lista, por lo que puede usarlo para cualquier cantidad de cuentas aprobadas que tenga. Sin embargo, en su caso, debe crear muchos de estos botones para sus otros tipos de cuentas (cuentas en espera).