在FF/Chrome上使用jQuery進行矩陣轉換時的CSS3轉換

Question

我已經寫了一個簡單的小轉換動畫，在頁面加載時應該會像打開窗簾一樣顯示內容。它使用css3的組合來設置轉換值，jQuery將更改應用於頁面加載時的transform：matrix值。它在Safari中運行正常，但對於我的生活，我無法理解爲什麼過渡效果在FF或Chrome上不起作用。在這兩種瀏覽器中，「盲目」都會消失，以在轉換顯示後顯示內容，而不是按照它應該在四個垂直條中過渡。下面

代碼，我也就把這是一個小提琴這裏（其中，因爲我說在Safari的作品，所以你可以看到的那種效果我很期待）：

https://jsfiddle.net/ebenezer66/783uh6k3/

基本HTML：

<div class="home__columnShades__div"> 
    <div class="home__columnShades__div__column"> 
    <div class="home__columnShades__div__columnOne"></div> 
    </div> 
    <div class="home__columnShades__div__column"> 
    <div class="home__columnShades__div__columnTwo"></div> 
    </div> 
    <div class="home__columnShades__div__column"> 
    <div class="home__columnShades__div__columnThree"></div> 
    </div> 
    <div class="home__columnShades__div__column"> 
    <div class="home__columnShades__div__columnFour"></div> 
    </div> 
</div> 

SCSS：

.home__columnShades__div { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 899; 
} 

.home__columnShades__div__column { 
    width: 25%; 
    height: 100%; 
    float: left; 
} 

.home__columnShades__div__columnOne { 
    position: absolute; 
    left: 0; 
    height: 100%; 
    width: inherit; 
    background-color: #000; 
    transition: transform 3s; 
    transition-delay: 0.5s; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: top left; 
} 

.home__columnShades__div__columnTwo { 
    @extend .home__columnShades__div__columnOne; 
    left: 25%; 
} 

.home__columnShades__div__columnThree { 
    @extend .home__columnShades__div__columnOne; 
    left: 50%; 
} 

.home__columnShades__div__columnFour { 
    @extend .home__columnShades__div__columnOne; 
    left: 75%; 
} 

的jQuery：

var viewWidthQuarter = $(window).width()/4; 

    $('.home__columnShades__div__columnOne').css({ 
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter/1.5 + ', 0)' 
    }); 
    $('.home__columnShades__div__columnTwo').css({ 
    'background-position': '-' + viewWidthQuarter + 'px' + ' 0', 
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter/1.5 + ', 0)' 
    }); 
    $('.home__columnShades__div__columnThree').css({ 
    'background-position': '-' + viewWidthQuarter * 2 + 'px' + ' 0', 
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter/1.5 + ', 0)' 
    }); 
    $('.home__columnShades__div__columnFour').css({ 
    'background-position': '-' + viewWidthQuarter * 3 + 'px' + ' 0', 
    'transform': 'matrix(0, 0, 0, 1, -' + viewWidthQuarter/1.5 + ', 0)' 
    }); 

Answer 1

儘管我還沒有解決爲什麼transform：matrix（或translate）不能在FF/Chrome上工作，我已經重寫了我的代碼，以便在每個垂直窗口的左側位置使用轉換，而不是轉換的翻譯價值。它實際上甚至更好一些 - 動畫絕對更流暢。

https://jsfiddle.net/ebenezer66/ttgp8bj4/

更新的jQuery：

var viewWidth = $(window).width(), 
    viewWidthQuarter = viewWidth/4; 

    $('.home__columnShades__div__columnOne').css({ 
    'left': viewWidth-(viewWidthQuarter*4.5) + 'px', 
    'transform': 'scaleX(0)' 
    }); 
    $('.home__columnShades__div__columnTwo').css({ 
    'background-position': '-' + viewWidthQuarter + 'px' + ' 0', 
    'left': viewWidth-(viewWidthQuarter*3.5) + 'px', 
    'transform': 'scaleX(0)' 
    }); 
    $('.home__columnShades__div__columnThree').css({ 
    'background-position': '-' + viewWidthQuarter * 2 + 'px' + ' 0', 
    'left': viewWidth-(viewWidthQuarter*2.5) + 'px', 
    'transform': 'scaleX(0)' 
    }); 
    $('.home__columnShades__div__columnFour').css({ 
    'background-position': '-' + viewWidthQuarter * 3 + 'px' + ' 0', 
    'left': viewWidth-(viewWidthQuarter*1.5) + 'px', 
    'transform': 'scaleX(0)' 
    }); 

更新CSS：

.home__columnShades__div { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    z-index: 899; 
} 

.home__columnShades__div__column { 
    width: 25%; 
    height: 100%; 
    float: left; 
} 

.home__columnShades__div__columnOne { 
    position: absolute; 
    left: 0; 
    height: 100%; 
    width: inherit; 
    background-color: #000; 
    transition: transform 3s, left 3s; 
    transition-delay: 0.5s; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: top left; 
} 

.home__columnShades__div__columnTwo { 
    @extend .home__columnShades__div__columnOne; 
    left: 25%; 
} 

.home__columnShades__div__columnThree { 
    @extend .home__columnShades__div__columnOne; 
    left: 50%; 
} 

.home__columnShades__div__columnFour { 
    @extend .home__columnShades__div__columnOne; 
    left: 75%; 
}