Question

我正在开发一个Bootstrap模板，我正在使用less.min.js在随时编译的Bootstrap 3.3.1 LESS文件（作为临时解决方案）上构建。问题是当我尝试翻转Bootstrap轮播的幻灯片时，他们没有动画。 Chrome开发工具给了我这个：

.carousel-inner > .item {
  transition: transform 0.6s ease-in-out;
  backface-visibility: hidden;
  perspective: 1000;
}

正如您所看到的，由于某些原因，没有-webkit-transition线。

切换到bootstrap.css或用v3.3.0替换carousel.less文件可以解决此问题。这是一个Bootstrap问题还是我身上的东西？

Answer 1

您应该运行autoprefixer（从版本3.2开始），另请参阅https://github.com/twbs/bootstrap/issues/15203

因为您正在编译客户端，所以无法运行this plugin。或者，您可以使用-prefix-free。

请注意，autoprefixer现在是TB默认构建过程的一部分。

以为他们应该在内部使用mixins直到v4

是的，可能。但我似乎新添加的代码不再以mixins为前缀。在v3.2之前使用mixin的代码。已经在v4之前没有被替换。

您可以在less/carousel.less文件中看到上述内容，其中包含以下代码（反映您的问题）：

// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
  transition: transform .6s ease-in-out;
  backface-visibility: hidden;
  perspective: 1000;

Bootstrap 3.3.1轮播动画不能与LESS一起使用

1 个答案: