如何结合CanJS与VelocityJS实现答题组件切换过渡效果？

嘿，我之前在CanJS项目里折腾过类似的组件过渡效果，刚好能给你一些实用的方案！结合StealJS和VelocityJS实现的切换动画，核心是利用CanJS的组件生命周期钩子，配合Velocity的动画API来控制入场和离场效果。

第一步：准备工作 #

首先确保你已经通过StealJS引入了VelocityJS：

1. 在项目的package.json中添加依赖：

   "dependencies": {
     "velocity-animate": "^2.0.6"
   }
   

2. 在需要用动画的组件中导入Velocity：

   import Velocity from 'velocity-animate';
   

第二步：给组件添加入场动画 #

利用CanJS组件的inserted钩子（组件插入DOM后触发），实现入场过渡：

import Component from 'can-component';
import DefineMap from 'can-define/map/map';

export default Component.extend({
  tag: 'quizz-question',
  viewModel: DefineMap.extend({
    questionData: { type: '*' } // 接收父组件传递的问题数据
  }),
  // 组件插入DOM后触发入场动画
  inserted(el) {
    // 先设置初始隐藏状态，避免闪屏
    Velocity(el, { opacity: 0, translateY: 20 });
    // 执行入场动画：从下方滑入并渐显
    Velocity(el, { opacity: 1, translateY: 0 }, {
      duration: 350,
      easing: 'easeOutQuad'
    });
  }
});

第三步：处理旧组件的离场动画（关键！） #

CanJS默认会直接移除组件，所以我们需要先触发离场动画，等动画结束后再真正移除组件。这里推荐在父组件中控制切换逻辑：

父组件（比如）的实现：

1. 模板部分：用{{#if}}绑定控制组件的显示，确保只有当前问题的组件存在于DOM中

<template>
  <div class="quizz-wrapper">
    {{#if currentQuestion}}
      <quizz-question questionData:from="currentQuestion"></quizz-question>
    {{/if}}
    <button on:click="switchQuestion()" disabled="{{isLastQuestion}}">
      {{isLastQuestion ? '完成' : '下一题'}}
    </button>
  </div>
</template>

2. ViewModel部分：在切换问题前，先触发当前组件的离场动画，动画完成后再更新问题数据

import Component from 'can-component';
import DefineMap from 'can-define/map/map';

export default Component.extend({
  tag: 'quizz-app',
  viewModel: DefineMap.extend({
    questions: { type: Array },
    currentIndex: 0,
    get currentQuestion() {
      return this.questions[this.currentIndex];
    },
    get isLastQuestion() {
      return this.currentIndex >= this.questions.length - 1;
    },
    switchQuestion() {
      const currentQuestionEl = this.element.querySelector('quizz-question');
      if (!currentQuestionEl) {
        // 没有当前组件时直接切换（比如初始加载）
        this.currentIndex++;
        return;
      }

      // 手动调用离场动画方法（需要在<quizz-question>中定义）
      currentQuestionEl.viewModel.animateLeave(() => {
        // 动画完成后更新索引，触发新组件插入
        this.currentIndex++;
      });
    }
  })
});

3. 回到组件，添加离场动画方法：

// 在之前的<quizz-question>组件中补充methods
methods: {
  animateLeave(callback) {
    // 执行离场动画：向上滑出并渐隐
    Velocity(this.element, { opacity: 0, translateY: -20 }, {
      duration: 300,
      easing: 'easeInQuad',
      complete: callback // 动画结束后执行父组件的回调，完成切换
    });
  }
}

一些额外的小提示 #

• 如果是批量渲染多个问题（比如用{{#each}}），可以在父组件中监听on:insert和on:remove事件，给每个子组件绑定动画逻辑
• 动画参数（时长、缓动函数、位移距离）可以根据你的UI设计调整，Velocity支持很多预设的缓动效果
• 记得给组件设置position: relative或者absolute，否则translateY可能不会生效

这样一套流程下来，就能实现旧问题组件平滑离场、新问题组件优雅入场的过渡效果啦！

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