Bootstrap 3.3.1傳送帶動畫不能與LESS一起工作

Question

我正在使用less.min.js在Bootstrap 3.3.1 LESS文件上編譯的Bootstrap模板（作爲臨時解決方案）。問題是，當我嘗試翻轉Bootstrap轉盤的幻燈片時，他們沒有動畫。 Chrome開發工具給了我這個：

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

正如你可以看到有沒有-webkit轉換線出於某些原因。

切換到bootstrap.css或用v3.3.0替換carousel.less文件可解決此問題。這是一個引導問題還是它在我身邊？

Answer 1

您應該運行autoprefixer（自3.2版本），還看到https://github.com/twbs/bootstrap/issues/15203

因爲你正在編譯客戶端，你不能運行this plugin。或者，您可以使用-prefix-free。

請注意，autoprefixer現在是TB默認構建過程的一部分。

認爲他們應該使用混入內部，直到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;