Fade in tabs in Zurb Foundation?

前端 未结 8 673
清歌不尽
清歌不尽 2021-01-03 03:04

I\'m trying to figure out if there\'s setting to fade in tabs nicely in Zurb Foundation.

If not, does anyone know the best way to achieve this manually?

Wha

8条回答
  •  一生所求
    2021-01-03 03:37

    Foundation 6 Solution Updated from Brocks code.

    .tabs-panel {
        *zoom: 1;
        margin-bottom: 1.5rem;
        /* Customized */
        display:block important!;
        opacity: 0;
    }
    /* Customized */
    @-webkit-keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .tabs-panel:before, .tabs-panel:after {
        content: " ";
        display: table; }
    .tabs-panel:after {
        clear: both; }
    .tabs-panel > .content {
        display: none;
        float: left;
        padding: 0.9375rem 0; }
    .tabs-panel.is-active {
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
        opacity: 1;
        display: block; }
    

提交回复
热议问题