Textillate动画实现咨询：按钮触发段落的入/出动画及内容替换需求

Alright, here's a complete working solution tailored exactly to your required click flow (#start_animation → #out_animation → #replaced_word). I’ve included safeguards to enforce the sequence and clear explanations for each part.

Step 1: Required Dependencies #

First, make sure you include these libraries (you can host them locally or use CDNs):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script>

Step 2: HTML Structure #

We’ll add the three buttons and the target paragraph that will animate and update:

<button id="start_animation">Start Animation</button>
<button id="out_animation" disabled>Exit Animation</button>
<button id="replaced_word" disabled>Replace Content</button>

<p id="target_text" class="textillate">Original text to animate</p>

The disabled attribute on exit/replace buttons prevents users from skipping steps accidentally.

Step 3: Basic CSS #

Add styling to handle initial text visibility and button appearance:

.textillate {
  opacity: 0; /* Hide text until start animation triggers */
  font-size: 1.5rem;
  margin-top: 20px;
}

button {
  margin: 0 10px 10px 0;
  padding: 8px 16px;
  font-size: 1rem;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

Step 4: JavaScript Logic #

This ties everything together—initializing Textillate, handling button clicks, and enforcing the animation sequence:

$(document).ready(function() {
  // Define Textillate configuration (manual control, no auto-start)
  const textillateConfig = {
    autoStart: false,
    in: {
      effect: 'fadeIn', // Customize entrance animation here
      delayScale: 1.5,
      delay: 50,
      sync: false
    },
    out: {
      effect: 'fadeOut', // Customize exit animation here
      delayScale: 1.5,
      delay: 50,
      sync: false
    }
  };

  $('#target_text').textillate(textillateConfig);

  // Cache DOM elements for better performance
  const $startBtn = $('#start_animation');
  const $outBtn = $('#out_animation');
  const $replaceBtn = $('#replaced_word');
  const $targetText = $('#target_text');

  // Handle start animation click
  $startBtn.on('click', function() {
    $targetText.textillate('start');
    $startBtn.prop('disabled', true);
    
    // Wait for entrance animation to finish before enabling exit button
    const inAnimDuration = textillateConfig.in.delay * $targetText.textillate('getWords').length + 500;
    setTimeout(() => {
      $outBtn.prop('disabled', false);
    }, inAnimDuration);
  });

  // Handle exit animation click
  $outBtn.on('click', function() {
    $targetText.textillate('out');
    $outBtn.prop('disabled', true);
    
    // Wait for exit animation to finish before enabling replace button
    const outAnimDuration = textillateConfig.out.delay * $targetText.textillate('getWords').length + 500;
    setTimeout(() => {
      $replaceBtn.prop('disabled', false);
    }, outAnimDuration);
  });

  // Handle content replacement click
  $replaceBtn.on('click', function() {
    // Update the paragraph with new content
    $targetText.text('New replaced content ready for the next animation cycle!');
    
    // Reset buttons to allow repeating the flow (optional)
    $replaceBtn.prop('disabled', true);
    $startBtn.prop('disabled', false);
    
    // Reinitialize Textillate to work with the new text
    $targetText.textillate('destroy');
    $targetText.textillate(textillateConfig);
  });
});

Customization Tips #

• Swap out the effect values (e.g., slideInLeft, bounceIn, slideOutRight) to use different animations—Textillate supports all animate.css effects.
• Adjust delay and delayScale to control the speed of letter-by-letter animations.
• Remove the button reset logic if you don’t want users to repeat the animation flow.

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