從屏幕外動畫一個div，沒有絕對位置？

Question

我有一個記分牌...這比分是一系列inline-block的申報單，以保持它的水平：

<div class="top"> 

    <div class="score1 color0 inline slow"> 
     <div class="inner color3 slow"> 
      <div class="title">0</div> 
     </div> 
    </div> 

    <div class="player1 color0 inline slow"> 
     <div class="inner color2 slow"> 
      <div class="title">KDZaster</div> 
     </div> 
    </div> 

    <div class="round color0 inline slow"> 
     <div class="inner color1 slow"> 
      <div class="title">Grand Finals</div> 
     </div> 
    </div> 

    <div class="player2 color0 inline slow"> 
     <div class="inner color2 slow"> 
      <div class="title">DarthArma</div> 
     </div> 
    </div> 

    <div class="score2 color0 inline slow"> 
     <div class="inner color3 slow"> 
      <div class="title">0</div> 
     </div> 
    </div> 

</div> 

我已經包括的jsfiddle：https://jsfiddle.net/Lsxhmky7/

這個頁面有一大堆動畫我使用CSS和jQuery（不包括在jsFiddle中）......我已經有了所有的動畫，除了一個以外。

我想要做的事情之一就是讓左右兩側的兩個得分箭頭從屏幕的邊緣滑入。

我知道我可以用絕對定位來做到這一點，但是這個網格在絕對位置上沒有其他任何東西，我不希望它是。我希望它是內聯的，這樣如果某些元素的寬度必須改變，頁面也隨之移動。

有沒有辦法讓屏幕上的這兩個元素動起來，同時保持所有其他塊的內聯定位？

Answer 1

與transform: translate();

移動使用transformX默認屏幕之外的箭頭相當簡單，然後進行動畫它移動回原來的位置。

animation: slideInLeft 2s 1 forwards;

動畫：[名稱] [長度] [迭代] [結束]

這將運行動畫只有一次，持續2秒然後在結束狀態下停止。

.score1 { 
    width: var(--score-width); 
    -webkit-clip-path: polygon(
     0 0, 
     0 calc(var(--main-height)/2), 
     0 var(--main-height), 
     calc(var(--score-width) - var(--arrow-width)) var(--main-height), 
     var(--score-width) calc(var(--main-height)/2), 
     calc(var(--score-width) - var(--arrow-width)) 0 
    ); 
    transform: translateX(-100px); 
    animation: slideInLeft 2s 1 forwards; 
} 

@keyframes slideInLeft { 
    from { transform: translate(-100px); } 
    to { transform: translateX(0); } 
} 

反向右箭頭。

:root { 
 
\t --main-color0: rgba(000,000,000,0.5); 
 
\t --main-color1: rgba(255,000,000,0.5); 
 
\t --main-color2: rgba(000,255,255,0.5); 
 
\t --main-color3: rgba(255,255,255,0.5); 
 
\t 
 
\t --main-height: 50px; 
 
\t --main-gutter: -10px; 
 
\t --main-padding: 10px; 
 
\t --main-border: 4px; 
 
\t 
 
\t --font-family: 'Franklin Gothic'; 
 
\t --font-color: #FFFFFF; 
 
\t --font-large: 24px; 
 
\t --font-small: 14px; 
 
\t --font-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000; 
 

 
\t --arrow-width: 15px; 
 
\t --round-width: 180px; 
 
\t --player-width: 300px; 
 
\t --score-width: 50px; 
 
\t 
 
\t --out-speed: 0.5s; 
 
\t --in-speed: 2s; 
 
} 
 

 
body { 
 
\t color: var(--font-color); 
 
\t font-family: var(--font-family); 
 
\t font-size: var(--font-large); 
 
\t text-shadow: var(--font-shadow); 
 
\t line-height: var(--main-height); 
 

 
\t margin: 10px 0; 
 
\t text-align: center; 
 
\t background-color: #ccc; 
 
} 
 

 
.slow { transition: all var(--in-speed) ease; } 
 
.fast { transition: all var(--out-speed) linear; } 
 
.inline { display: inline-block; vertical-align: middle; margin: 0 -7px; } 
 
.inner { -webkit-clip-path: inset(var(--main-border) 0); } 
 

 
.color0 { background-color: var(--main-color0); } 
 
.color1 { background-color: var(--main-color1); } 
 
.color2 { background-color: var(--main-color2); } 
 
.color3 { background-color: var(--main-color3); } 
 

 
.title { 
 
\t overflow: hidden; 
 
\t text-overflow: ellipsis; 
 
\t white-space: nowrap; 
 
\t padding: 0 10px; 
 
} 
 

 
.round { 
 
\t font-size: var(--font-small); 
 
\t text-transform: uppercase; 
 
\t width: var(--round-width); 
 
\t -webkit-clip-path: polygon(
 
\t \t var(--arrow-width) 0, 
 
\t \t 0 calc(var(--main-height)/2), 
 
\t \t var(--arrow-width) var(--main-height), 
 
\t \t calc(var(--round-width) - var(--arrow-width)) var(--main-height), 
 
\t \t var(--round-width) calc(var(--main-height)/2), 
 
\t \t calc(var(--round-width) - var(--arrow-width)) 0 
 
\t); 
 
} 
 

 
.player1 { 
 
\t width: var(--player-width); 
 
\t -webkit-clip-path: polygon(
 
\t \t 0 0, 
 
\t \t var(--arrow-width) calc(var(--main-height)/2), 
 
\t \t 0 var(--main-height), 
 
\t \t var(--player-width) var(--main-height), 
 
\t \t calc(var(--player-width) - var(--arrow-width)) calc(var(--main-height)/2), 
 
\t \t var(--player-width) 0 
 
\t); 
 
} 
 
.player2 { 
 
\t width: var(--player-width); 
 
\t -webkit-clip-path: polygon(
 
\t \t 0 0, 
 
\t \t var(--arrow-width) calc(var(--main-height)/2), 
 
\t \t 0 var(--main-height), 
 
\t \t var(--player-width) var(--main-height), 
 
\t \t calc(var(--player-width) - var(--arrow-width)) calc(var(--main-height)/2), 
 
\t \t var(--player-width) 0 
 
\t); 
 
} 
 
.player1 .title { padding: 0 20px; text-align: right; } 
 
.player2 .title { padding: 0 20px; text-align: left; } 
 

 

 

 
.score1 { 
 
\t width: var(--score-width); 
 
\t -webkit-clip-path: polygon(
 
\t \t 0 0, 
 
\t \t 0 calc(var(--main-height)/2), 
 
\t \t 0 var(--main-height), 
 
\t \t calc(var(--score-width) - var(--arrow-width)) var(--main-height), 
 
\t \t var(--score-width) calc(var(--main-height)/2), 
 
\t \t calc(var(--score-width) - var(--arrow-width)) 0 
 
\t); 
 
    transform: translateX(-100px); 
 
    animation: slideInLeft 2s 1 forwards; 
 
} 
 

 
@keyframes slideInLeft { 
 
    from { transform: translate(-100px); } 
 
    to { transform: translateX(0); } 
 
} 
 
.score2 { 
 
\t width: var(--score-width); 
 
\t -webkit-clip-path: polygon(
 
\t \t var(--arrow-width) 0, 
 
\t \t 0 calc(var(--main-height)/2), 
 
\t \t var(--arrow-width) var(--main-height), 
 
\t \t var(--score-width) var(--main-height), 
 
\t \t var(--score-width) calc(var(--main-height)/2), 
 
\t \t var(--score-width) 0 
 
\t); 
 
} 
 

 
.score1 .title { padding: 0 20px 0 0; text-align: right; } 
 
.score2 .title { padding: 0 0 0 20px; text-align: left; }

\t <div class="top"> 
 
\t \t 
 
\t \t <div class="score1 color0 inline slow"> 
 
\t \t \t <div class="inner color3 slow"> 
 
\t \t \t \t <div class="title">0</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="player1 color0 inline slow"> 
 
\t \t \t <div class="inner color2 slow"> 
 
\t \t \t \t <div class="title">KDZaster</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="round color0 inline slow"> 
 
\t \t \t <div class="inner color1 slow"> 
 
\t \t \t \t <div class="title">Grand Finals</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="player2 color0 inline slow"> 
 
\t \t \t <div class="inner color2 slow"> 
 
\t \t \t \t <div class="title">DarthArma</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="score2 color0 inline slow"> 
 
\t \t \t <div class="inner color3 slow"> 
 
\t \t \t \t <div class="title">0</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t 
 
\t </div>

Answer 2

你可以用好醇」 position: relative做到這一點：

.score1 { 
    position: relative; 
    right: calc(var(--score-width) + var(--arrow-width)); 
} 

使用transition/animation也可以不用jQuery的。

或者您可以使用transform: translate(...)，甚至更好translateX(...)觸發3D變換，因此負載可能會結束對GPU而不是CPU的，possibily得到更好的性能。