Ir para conteúdo

POWERED BY:

FabianoSouza

Transition Height não funciona em UL

Por , em Desenvolvimento frontend

Recommended Posts

FabianoSouza    5

FabianoSouza
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

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');
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Alessandro Bodão
      Transitar de uma página pra outra sem carregamento
      Por Alessandro Bodão
      Boa noite irmandade!
       
      Ando reparando de alguns anos pra cá, uma forte tendência em que sites bem dinâmicos e interativos transitam de uma página pra outra sem que a outra página se quer passe por um processo de carregamento, você clica, simplesmente acontece algumas transições nos elementos da página, e de repente, você está em outra página, outro url. De forma suave, nada é carregado, apenas algo acontece e você já está em outra página.
       
      Gostaria de saber como isso é feito pra aplicar em um site que estou desenvolvendo, se é algum framework, alguma ferramenta além do JavaScript...
       
      Trouxe um belo exemplo: https://www.traffic.productions/
       
      Se você chegou até aqui, agradeço desde já!
    • Omar~
      Adicionar transição de blocos
      Por Omar~
      Estou com uma tarefa aqui e não estou conseguindo criar uma lógica para adicionar uma transição entre os elementos.
      Segue da seguinte forma:
      Tenho uma caixa central que irá abrigar 3 ou mais caixas. Cada caixa filha tem exatamente as mesmas dimensões da paixa mãe. Ao executar a função a caixa que está ao centro move-se para esquerda e a da direita também assumindo a posição da caixa anterior. Quando por exemplo antes de chegar a última filha, a primeira que se moveu toma o lugar da ultima assim tornando-se uma espécie de loop infinito. Ou seja depois da última filha a primeira toma o lugar dela para que a atual última possa se mover ao centro.  
      Exemplo:
        / [1]  / [2] - [3]
      "clicou em avançar torna essa sequência"
      [1]  / [2] / [3]
       
      Até aqui tudo bem, bastando eu clonar a primeira caixa atual, remover-la então logo em seguida adicionar a cópia no final.
      Porém aqui que entra a questão pois teria que adicionar uma animação de transição, de forma que que as caixas movam-se lentamente para esquerda.
       
      Aqui está o esboço de teste:
      HTML:
       
      CSS:
       
      Javascript:
       
      Eu pensei em recursos como marginLeft e translateX, mas em ambos casos sempre terei o problema que se eu mover negativamente as caixas, ao remover qualquer uma que é o caso da primeira ir para último, todas as demais caixas vão ficar fora da caixa central.
       
      Quem tiver alguma ideia como adicionar essa transição de movimento, ficaria grato com a ajuda. 
    • Sapinn
      Existe alguma maneira de fazer um transition em javascript??
      Por 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
      Por 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
      Simples CSS Button Div transition
      Por Carlos 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 !!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito