Высота перехода не работает CSS

Мои коды довольно простой, но я не смог получить, как переходные работы и как она не работает на моем HTML прямо здесь:Высота перехода не работает CSS

<div id="footer"> 
    <div id="footer1"> 
     <p> This should be a footer </p> 
    </div> 
</div>

и мой CSS

 #footer { 
     position: fixed; 
     bottom: 0; 
     background-color: black; 
     min-width: 100%; 
     font-family: Agency FB; 
     transition: width 3s; 
    } 
    #footer1 { 
     text-align: center; 
     color: #4e4e4e; 

    } 
    #footer:hover { 

     opacity: .8; 
     color: white; 
     height: 100px; 
    }

Я не вижу ничего плохого в своем коде. Это или я все еще неопытен. Благодаря!

источник

2016-08-20 Dinklefarts

Элемент '# footer' требует фиксированной числовой высоты, чтобы начать анимацию, она не будет переходить из' auto' в '100px'. – mch

попробуйте это: https://jsfiddle.net/maky/bgeLbpd9/ – fernando

Вот хороший источник для изучения [mdn] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) и [css-трюки] (https://css-tricks.com/almanac/properties/t/transition/) – Dhaval

Попробуйте

#footer { 
    position: fixed; 
    bottom: 0; 
    background-color: black; 
    min-width: 100%; 
    font-family: Agency FB; 
    transition: height 3s; 
    height: 50px; 
} 
#footer1 { 
    text-align: center; 
    color: #4e4e4e; 

} 
#footer:hover { 

    opacity: .8; 
    color: white; 
    height: 100px; 
}

Если это не работает, пожалуйста, сообщите мне

источник

2016-08-20 08:27:37 Bisquitue

О, Боже ... Я настолько слеп. Я все равно узнал, но мне потребовалось больше времени, чтобы понять, что «живой» зритель DreamWeaver CS6 по какой-то причине не воспроизводит анимацию. Спасибо в любом случае, я обязательно проверю на Chrome в следующий раз. XD – Dinklefarts

@ Dinklefarts haha fightgles – Bisquitue

#footer { 
 
     position: absolute; 
 
     bottom:0; 
 
     background-color: black; 
 
     min-width: 100%; 
 
     height:50px; 
 
     font-family: Agency FB; 
 
     transition: width 3s, height 1s, transform 1s; 
 
    } 
 
    #footer1 { 
 
     text-align: center; 
 
     color: #4e4e4e; 
 
    } 
 
    #footer:hover { 
 
     opacity: .8; 
 
     color: white; 
 
     height: 100px; 
 
    }

<div id="footer"> 
 
    <div id="footer1"> 
 
     <p> This should be a footer </p> 
 
    </div> 
 
</div>

Просто поиграйте со значениями transition: width 3s, height 1s, transform 1s;

Ура!

источник

2016-08-20 08:36:47 Bishop

Высота перехода не работает CSS

ответ

Смежные вопросы