当滑块向左/向右变化时，如何为owlcarouseel卡设置动画

<div class="slider">
  <div class="owl-carousel">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <!-- 更多卡片... -->
  </div>
</div>

.card {
  transition: transform 0.5s ease;  /* 添加过渡效果 */
}

.card.animate-left {
  transform: translateX(-100%);  /* 左滑动画效果 */
}

.card.animate-right {
  transform: translateX(100%);  /* 右滑动画效果 */
}

$(document).ready(function() {
  $('.owl-carousel').on('changed.owl.carousel', function(event) {
    var currentIndex = event.item.index;
    var previousIndex = event.relatedTarget.normalize(event.item.index, true);
    
    if (currentIndex > previousIndex) {
      $('.card').eq(currentIndex).addClass('animate-left');
    } else {
      $('.card').eq(currentIndex).addClass('animate-right');
    }
  });
});