Jump to content
FabianoSouza

Transition Height não funciona em UL

By FabianoSouza, in HTML e CSS

Recommended Posts

FabianoSouza    5

FabianoSouza
Posted

Estou tentando fazer algo simples: redimensionar a altura de uma UL, usando classList.toggle (javascript).

Percebo que, se no CSS eu tentar aplicar o estilo em cascata, não faz efeito na UL só por estar dentro de uma DIV.

 

Se no CSS eu colocar: 

.cnt-filtro-body ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden;
    transition: height 0.5s; background-color:#FF0; display:block; 

pra estilizar somente ULs que estejam dentro da DIV que tem a classe chamada cnt-filtro-body, a coisa não funciona.

Só funciona se partir direto da ul, assim: 

ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden;
    transition: height 0.5s; background-color:#FF0; display:block; 

 

Vejam o código. 

<!DOCTYPE html>
<html>
<head>

<style>
.cnt-filtro-body{position:relative; height:50px; width:100%;
}
.secao-toggle{height:160px; display:block; float:left; position:relative;}

ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden;
	transition: height 0.5s; background-color:#FF0; display:block; 
}
</style>

</head>
<body>

<button onclick="myFunction()">Clique aqui</button>
<div class="cnt-filtro-body">
<ul id="myDIV">
This is a DIV element.
</ul>
</div>
<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.toggle("secao-toggle");
}
</script>
</body>
</html>

Minha necessidade é: estilizar apenas UL que estejam dentro da DIV que esteja usando a classe cnt-filtro-body

Share this post

Link to post
Share on other sites

Omar~    87

Omar~
Posted

Algumas incoerências:

1 - No CSS a tag <ul> é transcrita depois do classificador secao-toggle mesmo em uma re-escrita o browser irá ignorar usar usando o que é de substituição no caso somente dados da <ul>.

2 - O classificador cnt-filtro-body já possui uma altura fixa, qualquer filho terá sua altura máxima herdada de seu pai, a não ser que o elemento pai possua alguma regra de overflow.

3 - Suspeito que queira uma espécie de animação de slide-dow/up o browser não executa o esperado você precisará do atributo transform.

 

Obs.: Evite maximizar intervenções em tag's pre estipulando pois qualquer outra tag igual assumirá as mesmas características dificultando manutenção e updates futuros.

É possível obter o efeito através de clonagem de elementos pois é assim que jquery executa sem interver no CSS, porém isso consome uma memória elevada demais, termos de MBs para executar algo que simplesmente com CSS em Bits você faz.

 

Veja se é isso que pretende:

HTML 

<button onclick="myFunction()">Clique aqui</button>
<div class="cnt-filtro-body">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>

 

CSS 

.cnt-filtro-body {
    position: relative;
    overflow: hidden;
    height: 0;
    transition: .5s all ease-out
}
.cnt-filtro-body ul {
    list-style: none;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 160px;
    transform: translateY(-160px);
    transition: .5s all ease-out
}
.cnt-filtro-body.secao-toggle {
    height: 160px
}
.cnt-filtro-body.secao-toggle ul {
    pointer-events: auto;
    transform: translateY(0)
}

 

JAVASCRIPT 

function myFunction() {
    var element = document.querySelector('div.cnt-filtro-body');
    element.classList.toggle('secao-toggle');
}

 

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing HTML e CSS

  • Similar Content

    • Sapinn
      Existe alguma maneira de fazer um transition em javascript??
      By Sapinn
      Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
       
      Codigo js 
       
      window.onscroll = function(){
          var top = window.pageXOffset || document.documentElement.scrollTop
          var barra = document.querySelector(".barra");
          if(top > 900){
              barra.style.display = 'flex';
      //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
              barra.classList.add('transition');
          }else{
             barra.style.display = 'none';
          }
      }
       
       
      Codigo css
      .barra{
          width: 100%;
          height: 70px;
          background-color: #090b13;
          display: none;
          justify-content: space-between;
          position: fixed;
          opacity: 0;
      }
      .transition{
          transition: 1s;
          opacity: 0.7;
          
      }
       
      codigo HTML
       
      <div class="barra" >
              <img src="assets/images/logo-nopad.svg" alt="">
              <button class="botao-assinatura-header">Assine Agora</button>
        </div>
       
       
    • jackrs
      Como colocar estrutura de animate / effects de transição no appendto
      By jackrs
      Gostaria de saber como consigo colocar um animate/effect de transição mais "suave" na troca das divs do código anexo.
      https://jsfiddle.net/h2av6nct/
    • Carlos Web Soluções Web
      Simples CSS Button Div transition
      By Carlos Web Soluções Web
      Olá, pessoal, boa tarde !!
       
      Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !!
      Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando:

       
      <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor !
      Obrigado !!
    • João Paulo Bianchi
      Transição automática de imagens no slider com css
      By João Paulo Bianchi
      Bom dia pessoal, sou novo no Imasters e na parte de desenvolvimento em geral e estou com uma dúvida bem simples, não julguem kkk
      Criei esse slider descrito logo abaixo e não consigo fazer a troca de imagens automática.
      Por exemplo, a cada 3 segundos a imagem fazer um fade out e entrar outra com fade in básico, ou mesmo deslizar pro lado. A animação não tem tanta importancia.
      O que queria mesmo era fazer com que funcione o código pra automatizar a troca de imagens.
      Alguem poderia por favor me dar uma luz? Tentei algumas coisas aqui mas não consegui :/
       
      Segue o slider:
       
      <div class="div-slider"> <ul class="slides-front"> <input type="radio" name="radio-btn" id="img-1" checked=""> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-1.png"> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-2.png"> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-3.png"> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> </li> </ul> </div> E o CSS do mesmo:
       
      /*------------------- SLIDER FRONT PAGE - NOVIDADES ----------------------*/ @import url(https://fonts.googleapis.com/css?family=Varela+Round); .div-slider{ width: auto; height: 400px; text-align: center; } .slides-front { padding: 0; width: 980px; height: 370px; display: block; margin: auto; position: relative; } .slides-front * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides-front input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 980px; height: 370px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out 0.1s; } .slide img { width: 100%; height: 100%; } .nav label { width: 150px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out 0.1s; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: relative; text-align: center; } .nav-dots .nav-dot { top: 375px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, { background: rgba(0, 0, 0, 0.8); }  
      Acho que é isso (:
      Qualquer ajuda é bem vinda. Valeeeeu
    • xDenisX
      Controlar o time do transition ao retirar o mouse
      By xDenisX
      Eae pessoal tudo bem ?
      Seguinte estou aprendendo CSS, e fiz um menu um pouco animado. Ao passar a mouse sobre um Li ela mostra seus componentes com uma animação e delays diferentes.
       
      Meu problema é o seguinte, quando eu tiro o Mouse, os delays ainda acontecem deixando assim uma animação bem "Feia". Eu queria que ao tirar o mouse os itens voltassem ao mesmo tempo sem delay alguém pode me ajudar ?
       
      ( mais uma pergunta, estou aprendendo CSS3 e logo logo começo estudar JavaScript sabem me dizer se conseguria fazer animações como essa utilizando JavaScript mais facilmente ? )
       
      Obrigado pela atenção o código esta abaixo
       
      <!doctype html> <html> <head> <meta charset="utf-8"> <title>Menu deslizante</title> <style> .container{ height: 500px; width: 200px; padding: 0px; overflow: hidden; } .menu{ width: 200px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; color:whitesmoke; font-size: 13pt; } .menu ul{ list-style: none; position: relative; padding: 0px; } .menu ul ul { padding: 0; position:absolute; transform: translateX(200px); } .menu ul li:hover ul{ position: relative; transition:2s; } .menu ul li:nth-child(1){ transition:0.25s; } .menu ul li:hover ul li:nth-child(1){ transform: translateX(-190px); } .menu ul li:nth-child(2){ transition:0.25s; transition-delay: 0.25s; } .menu ul li:hover ul li:nth-child(2){ transform: translateX(-190px); } .menu ul li:nth-child(3){ transition:0.25s; transition-delay: 0.5s; } .menu ul li:hover ul li:nth-child(3){ transform: translateX(-190px); } .menu li{ padding: 15px; cursor: pointer; background-color: rgba(188,27,30,1.00); border-bottom: rgba(229,79,82,1.00) solid 1px; } </style> </head> <body> <div class="container"> <nav class="menu"> <ul> <li>Home</li> <li>Galeria</li> <li>Shop <ul> <li>Cell Cases</li> <li>Notebook Acessories</li> <li>To your House</li> </ul> </li> <li>Contacts</li> <li>About us</li> </ul> </nav> </div> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept