如何使用Tailwind制作打字动画？ | next13.4 和 tailwind

huangapple
go评论53阅读模式
英文:

How to make typing animation with Tailwind? | next13.4 & tailwind

问题

我遇到了一点文字输入动画的问题。我想要对这一行中的最后一个单词进行动画处理。我已经在tailwind.config.js中添加了一些改进，但是闪烁动画可以工作，但打字动画不能。

<h1 className='head_text text-center'>
    Discover & Share
    <br className='max-md:hidden' />
    <span className='green_gradient text-center'>
        AI-Powered <span className='overflow-hidden whitespace-nowrap font-mono animate-typing border-r-4'>Ideas</span>
    </span>
</h1>

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx,mdx}',
        './components/**/*.{js,ts,jsx,tsx,mdx}',
        './app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            animation: {
                typing: 'typing 2s steps(6), blink 1s infinite',
            },
            keyframes: {
                typing: {
                    from: { width: '0' },
                    to: { width: '6ch' },
                },
                blink: {
                    from: { 'border-right-color': 'transparent' },
                    to: { 'border-right-color': 'black' },
                },
            },
            fontFamily: {
                satoshi: ['Satoshi', 'sans-serif'],
                inter: ['Inter', 'sans-serif'],
            },
            colors: {
                'primary-orange': '#FF5722',
            },
        },
    },
    plugins: [],
};

希望这能帮助你解决问题。

英文:

I'm stuck a little bit with text typing animation. I want to animate the last word in this line. I've already added some improvements to tailwind.config.js, but the blinking animation is working, and the typing animation isn't.

 &lt;h1 className=&#39;head_text text-center&#39;&gt;
                Discover &amp; Share
                &lt;br className=&#39;max-md:hidden&#39; /&gt;
                &lt;span className=&#39;green_gradient text-center&#39;&gt;
                    AI-Powered &lt;span className=&#39;overflow-hidden whitespace-nowrap font-mono animate-typing border-r-4&#39;&gt;Ideas&lt;/span&gt;
                &lt;/span&gt;
            &lt;/h1&gt;

tailwind.config.js

/** @type {import(&#39;tailwindcss&#39;).Config} */
module.exports = {
    content: [
        &#39;./pages/**/*.{js,ts,jsx,tsx,mdx}&#39;,
        &#39;./components/**/*.{js,ts,jsx,tsx,mdx}&#39;,
        &#39;./app/**/*.{js,ts,jsx,tsx,mdx}&#39;,
    ],
    darkMode: &#39;class&#39;,
    theme: {
        extend: {
            animation: {
                typing: &#39;typing 2s steps(6), blink 1s infinite&#39;,
            },
            keyframes: {
                typing: {
                    from: { width: &#39;0&#39; },
                    to: { width: &#39;6ch&#39; },
                },
                blink: {
                    from: { &#39;border-right-color&#39;: &#39;transparent&#39; },
                    to: { &#39;border-right-color&#39;: &#39;black&#39; },
                },
            },
            fontFamily: {
                satoshi: [&#39;Satoshi&#39;, &#39;sans-serif&#39;],
                inter: [&#39;Inter&#39;, &#39;sans-serif&#39;],
            },
            colors: {
                &#39;primary-orange&#39;: &#39;#FF5722&#39;,
            },
        },
    },
    plugins: [],
};

答案1

得分: 1

<span> 元素默认具有 display: inline，并且 width 对内联元素没有影响。您可以考虑在 <span> 上应用 display: inline-block 类型的实用程序类，以使 width 生效：

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->
tailwind.config = {
  theme: {
    extend: {
      animation: {
        typing: 'typing 2s steps(6), blink 1s infinite',
      },
      keyframes: {
        typing: {
          from: {
            width: '0'
          },
          to: {
            width: '6ch'
          },
        },
        blink: {
          from: {
            'border-right-color': 'transparent'
          },
          to: {
            'border-right-color': 'black'
          },
        },
      },
      fontFamily: {
        satoshi: ['Satoshi', 'sans-serif'],
        inter: ['Inter', 'sans-serif'],
      },
      colors: {
        'primary-orange': '#FF5722',
      },
    },
  },
}

<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<h1 class='head_text text-center'>
  Discover & Share
  <br class='max-md:hidden' />
  <span class='green_gradient text-center'>
    AI-Powered <span class='inline-block overflow-hidden whitespace-nowrap font-mono animate-typing border-r-4'>Ideas</span>
  </span>
</h1>

<!-- end snippet -->
英文:

&lt;span&gt; elements have display: inline by default and width has no effect on inline elements. You could consider applying display: inline-block on the &lt;span&gt; via the inline-block utility class so that width takes effect:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

tailwind.config = {
  theme: {
    extend: {
      animation: {
        typing: &#39;typing 2s steps(6), blink 1s infinite&#39;,
      },
      keyframes: {
        typing: {
          from: {
            width: &#39;0&#39;
          },
          to: {
            width: &#39;6ch&#39;
          },
        },
        blink: {
          from: {
            &#39;border-right-color&#39;: &#39;transparent&#39;
          },
          to: {
            &#39;border-right-color&#39;: &#39;black&#39;
          },
        },
      },
      fontFamily: {
        satoshi: [&#39;Satoshi&#39;, &#39;sans-serif&#39;],
        inter: [&#39;Inter&#39;, &#39;sans-serif&#39;],
      },
      colors: {
        &#39;primary-orange&#39;: &#39;#FF5722&#39;,
      },
    },
  },
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.tailwindcss.com/3.3.3&quot;&gt;&lt;/script&gt;

&lt;h1 class=&#39;head_text text-center&#39;&gt;
  Discover &amp; Share
  &lt;br class=&#39;max-md:hidden&#39; /&gt;
  &lt;span class=&#39;green_gradient text-center&#39;&gt;
    AI-Powered &lt;span class=&#39;inline-block overflow-hidden whitespace-nowrap font-mono animate-typing border-r-4&#39;&gt;Ideas&lt;/span&gt;
  &lt;/span&gt;
&lt;/h1&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月24日 18:56:19
  • 转载请务必保留本文链接：https://go.coder-hub.com/76753785.html
  • next.js
  • reactjs
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定