点击替换div：ServiceNow入职步骤组件交互优化需求

Got it, let's tackle this ServiceNow widget upgrade to make the step-to-task transition feel smoother and more intuitive. Here's a straightforward, implementation-ready approach:

1. Tweak the Widget HTML Structure #

First, wrap your onboarding steps and task list in a parent container, and add a back button that’s hidden by default. This gives us clean, toggleable sections:

<div class="onboarding-container">
  <!-- Onboarding Steps Section (Visible by Default) -->
  <div id="steps-section" class="content-panel">
    <h3>Onboarding Steps</h3>
    <div class="step-item" ng-click="c.loadTaskList(step)" ng-repeat="step in c.data.onboardingSteps">
      {{step.label}}
    </div>
  </div>

  <!-- Task List Section (Hidden by Default) -->
  <div id="tasks-section" class="content-panel hidden">
    <button id="back-to-steps" ng-click="c.returnToSteps()">← Back to Onboarding Steps</button>
    <h3>Required Tasks: {{c.activeStep.label}}</h3>
    <div class="task-item" ng-repeat="task in c.activeStep.tasks">
      {{task.name}}
    </div>
  </div>
</div>

2. Update the Client Script for Toggle Logic #

Modify your client script to handle the smooth fade transitions and state switching. We’ll use a mix of CSS transitions and simple JS timing to keep things lightweight:

api.controller = function($scope) {
  var c = this;
  
  // Track the currently selected step
  c.activeStep = {};

  // Switch from steps to task list with fade effect
  c.loadTaskList = function(selectedStep) {
    c.activeStep = selectedStep;
    const stepsPanel = document.getElementById('steps-section');
    const tasksPanel = document.getElementById('tasks-section');

    // Trigger fade-out for steps, then show tasks
    stepsPanel.classList.add('fade-out');
    setTimeout(() => {
      stepsPanel.classList.add('hidden');
      tasksPanel.classList.remove('hidden');
      tasksPanel.classList.add('fade-in');
    }, 300); // Match CSS transition duration
  };

  // Switch back to steps from task list
  c.returnToSteps = function() {
    const stepsPanel = document.getElementById('steps-section');
    const tasksPanel = document.getElementById('tasks-section');

    tasksPanel.classList.add('fade-out');
    setTimeout(() => {
      tasksPanel.classList.add('hidden');
      stepsPanel.classList.remove('hidden');
      stepsPanel.classList.add('fade-in');
      // Reset transition classes after animation ends
      setTimeout(() => {
        stepsPanel.classList.remove('fade-in');
        tasksPanel.classList.remove('fade-out');
      }, 300);
    }, 300);
  };
};

3. Add CSS for Smooth Fade Transitions #

Drop this into your widget’s CSS field to handle the visual effects:

.content-panel {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.hidden {
  display: none;
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}

#back-to-steps {
  margin-bottom: 1.2rem;
  padding: 0.6rem 1.2rem;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
}

#back-to-steps:hover {
  background-color: #e8e8e8;
}

.step-item {
  padding: 0.8rem;
  margin: 0.5rem 0;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fafafa;
}

.step-item:hover {
  background-color: #f0f0f0;
}

4. Quick ServiceNow-Specific Notes #

• Ensure your server script populates c.data.onboardingSteps with each step’s associated tasks (e.g., step.tasks as an array of task objects).
• If you prefer using AngularJS’s built-in animations, you can inject $animate into your controller and use $animate.addClass()/$animate.removeClass() instead of raw JS timing—this integrates more seamlessly with ServiceNow’s Angular setup.
• Test the widget in both the portal preview and live portal to confirm transitions work across different views.

This setup will make the entire steps panel fade out and get replaced by the task list (with a smooth fade-in) when a step is clicked, and the back button will reverse the process cleanly.

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