> For the complete documentation index, see [llms.txt](https://thdbsgh3443.gitbook.io/triplexlab/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://thdbsgh3443.gitbook.io/triplexlab/triplexlab-api/more.md). # MoreViews > 1. Ratio은 아이템 객수의 비율로 계산해서 page numbering을 계산해줍니다. > 2. Item은 아이템 객수만큼 계산해서 page numbering이 증가해 줍니다 ## MORE Ratio {% tabs %} {% tab title="HTML" %} ```markup

Ratio

``` {% endtab %} {% tab title="CSS" %} ```css /** 더보기 클릭 할때마다 아이템 나타나는 애니메이션 추가 */ @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } } @-o-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } } .list__inner .list__item__box { display: block; -webkit-animation: fadeInFromNone 0.6s ease-out; -moz-animation: fadeInFromNone 0.6s ease-out; -o-animation: fadeInFromNone 0.6s ease-out; animation: fadeInFromNone 0.6s ease-out; } .list__inner .list__item__box.active {opacity: 0; display: none;} ``` {% endtab %} {% tab title="JS" %} ```javascript ``` {% endtab %} {% endtabs %} ## 👉🏻예시확인 [stackblitz](https://stackblitz.com/edit/web-platform-tzfc8a?file=index.html) 사이트 확인 ## MORE Item {% tabs %} {% tab title="HTML" %} ```markup

Item

``` {% endtab %} {% tab title="CSS" %} ```css /** 더보기 클릭 할때마다 아이템 나타나는 애니메이션 추가 */ @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } } @-o-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; } } .list__inner .list__item__box { display: block; -webkit-animation: fadeInFromNone 0.6s ease-out; -moz-animation: fadeInFromNone 0.6s ease-out; -o-animation: fadeInFromNone 0.6s ease-out; animation: fadeInFromNone 0.6s ease-out; } .list__inner .list__item__box.active {opacity: 0; display: none;} ``` {% endtab %} {% tab title="JS" %} ```javascript ``` {% endtab %} {% endtabs %} ## 👉🏻예시확인 [stackblitz](https://stackblitz.com/edit/web-platform-vzssne?file=index.html) 사이트 확인