Nuxt中使用vue-typed-js如何在元素进入视口时触发打字动画

核心思路是通过vue-typed-js自带的start属性控制打字动画的启动时机，配合你已有的v-observe-visibility指令实现进入视口才触发的效果，修改后的完整代码如下：

<template>
    <section>
        <b-container class="enno_clients section">
            <b-row>
                <b-col cols="6">
                    <h6>02 / {{ $t('home.clients.subheading') }}</h6>
                    <!-- 新增:start="showAnimation"属性，控制打字动画启动时机 -->
                    <vue-typed-js 
                    v-observe-visibility="{ callback: isViewableNow, once: true }"
                    :class="{ 'visible': showAnimation, 'invisible': !showAnimation }"
                    :start="showAnimation"
                    :typeSpeed="30" :showCursor="false" :strings="[ $t('home.clients.heading') ]" >
                        <h2 class="main_hero_heading typing"></h2>
                    </vue-typed-js>

                </b-col>
                <b-col cols="6" >
                    asd

                </b-col>
            </b-row>
         </b-container>
    </section>
</template>

<style scoped>
    .visible { visibility: visible; opacity:1; transition: opacity 0.3s ease; }
    .invisible { visibility: hidden; opacity:0; }
</style>

<script>
export default {
    name: 'Clients',
    data() {
      return {
        show_hero_content: true,
        // 初始为false，页面加载时既隐藏元素，也不启动打字动画
        showAnimation: false,
        VueTypedJs: ''
      }
    },
    methods:{
        isViewableNow(isVisible, entry) {
            this.showAnimation = isVisible;
        }
    },
    mounted() {
        this.show_hero_content = false;  
    },
}
</script>

调整说明 #

• 新增的:start="showAnimation"是vue-typed-js的原生配置项，值为false时不会自动启动打字动画
• 元素进入视口时回调触发showAnimation变为true，同时切换元素显隐状态、启动打字动画，两者完全同步不会出现错位
• 样式中给visible类加了opacity过渡效果，避免元素出现太生硬，不需要可以删掉

内容的提问来源于stack exchange，提问作者maverik90