Vue 3 Splitting | southcoastweb

Vue 3 Splitting | southcoastweb

설치

npm i vue3-splitting

전역으로 플러그인 설정

import { Vue3Splitting } from 'vue3-splitting';

app.component('Vue3Splitting', Vue3Splitting);

<Vue3Splitting class="my-4" wrapper-tag="ul" line-tag="li" :words="false">Hello World!</Vue3Splitting>

<template>
  <div class="gnb dib lg-mr12rem md-dn">
    <ul class="init m">
      <li v-for="(menu, index) in menuItems" :key="index">
        <Vue3Splitting class="splitting" :words="true" wrapper-tag="a">
          {{ menu.name }}
        </Vue3Splitting>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const menuItems = ref([
  { name: '세이프위즈란?' },
  { name: '사용방법' },
  { name: '안전용품' },
  { name: '커뮤니티' },
  { name: '문의하기' }
]);
</script>

.gnb{
    vertical-align:top;

    > ul{
        

        > li{

            > a{
                display:block; padding:0 2.4rem; font-size:1.6rem; cursor:pointer;

                // 
                .v3sp-c {
                    vertical-align:middle; line-height:1; position:relative; overflow: hidden; color: transparent; height: inherit; display: inline-block;

                    &::before,
                    &::after{
                        content: attr(data-char); height: inherit; line-height: inherit; display: inline-block; visibility: visible; left: 0; top: 0; color: #111; transition: transform .5s cubic-bezier(0.9,0,0.2,1);                            transition-delay: calc(0.2s + (0.02s * (var(--char-index))))
                    }
                }

                .v3sp-c:before { 
                    color: #5CCCEC; transform: translateY(-100%); transition-delay: calc(0.02s * (var(--char-index)))
                }

            }

            &:hover{

                > a{

                    .v3sp-c:before {
                        transition-delay: calc(0.2s + (0.02s * (var(--char-index)))); transform: translateY(0%);
                    }

                    .v3sp-c:after {
                        transition-delay: calc(0.02s * (var(--char-index))); transform: translateY(100%);
                    }
                }
            }
        }
    }
}