Keen Slider：defaultAnimation不生效，如何设置滑动动画时长与缓动？

问题背景 #

Keen Slider的defaultAnimation配置项仅对next()、prev()方法生效，无法影响moveToIdx()调用及拖拽滑动释放后的动画——当前仅能修改按钮点击时的动画参数，滑动操作的动画时长、缓动类型无法通过该配置变更。

内置解决方案（无需修改源码） #

Keen Slider提供了两个内置配置/用法来覆盖这两类场景的动画：

1. 针对拖拽滑动释放后的动画：使用dragAnimation配置项
   该配置专门控制用户拖拽滑块释放后的过渡动画，可直接设置时长和缓动函数。

2. 针对moveToIdx()方法：调用时手动传入动画参数
   moveToIdx()方法支持第二个参数传入自定义动画配置，优先级高于defaultAnimation。

代码示例 #

const current = ref(0);
const [container, slider] = useKeenSlider({
  slides: {
    perView: 1,
    spacing: 15,
  },
  initial: current.value,
  slideChanged: (s) => {
    current.value = s.track.details.rel;
  },
  // 控制next/prev的默认动画
  defaultAnimation: {
    duration: 1300,
    easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
  },
  // 控制拖拽滑动释放后的动画
  dragAnimation: {
    duration: 1300,
    easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
  }
});

// 调用moveToIdx时传入自定义动画配置
const jumpToSlide = (targetIdx) => {
  slider.value?.moveToIdx(targetIdx, {
    duration: 1300,
    easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
  });
};

说明 #

• defaultAnimation仅作为next()、prev()的默认动画配置，并非全局动画开关；
• dragAnimation是专门针对拖拽交互的动画配置项，属于Keen Slider的内置配置，无需修改源码即可生效；
• moveToIdx()的第二个参数支持完全自定义动画参数，可灵活适配不同场景的需求。

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