Question

我想知道是否有办法覆盖或改变vue组件内的过渡我实际上正在使用 buefy 组件制作我的网站..但问题是有些组件如崩溃它有一个淡入淡出过渡的插槽而且我不喜欢它。

如果有办法超越vue过渡，我正在琢磨或制作一个 mixin ，它将覆盖javascript 转换挂钩。。但现在的问题是，他们正在应用css转换..相反，我希望javascript钩子触发并进行幻灯片转换一些如何..
而不是去制作新的vue组件

Answer 1

Buefy似乎支持其组件的正常Vue样式转换，尽管它没有记录。 buefy css显示了一些预定义的淡入淡出，放大，缩小，滑动下一个和前一个幻灯片的过渡。如果你想要不同的过渡，你必须自己定义它们或使用像Animate.css这样的CSS库。

您可以通过将animation="name"添加到组件来覆盖默认的淡入淡出过渡。

<b-collapse animation="slide-next">
  //..
</b-collapse>

您可以使用css创建自己的。

自定义动画'.myCustomSlide'

的示例

.myCustomSlide-leave-active,
.myCustomSlide-enter-active {
   transition: 1s;
}
.myCustomSlide-enter {
   transform: translate(100%, 0);
}
.myCustomSlide-leave-to {
   transform: translate(-100%, 0);
}

这是一个有效的jfiddle示例，其中包含两个内置示例和一个自定义示例。 https://jsfiddle.net/skribe/nnbup5wg/3/

有没有办法覆盖vue组件内的过渡

1 个答案: