从屏幕外动画div,没有绝对位置?
I have a scoreboard... This scoreboard is a series of inline-block divs to keep it horizontal:
我有一个记分牌...这个记分牌是一系列内联块div,以保持水平:
<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>
I have included a jsFiddle: https://jsfiddle.net/Lsxhmky7/
我已经包含了一个jsFiddle:https://jsfiddle.net/Lsxhmky7/
This page has a whole bunch of animations that I am doing with both CSS and jQuery (which are not included in the jsFiddle)... I've got all the animations working, except one.
这个页面有一大堆动画,我用CSS和jQuery(不包含在jsFiddle中)...我已经让所有的动画工作,除了一个。
One of the things I would like to do is so that the two score arrows on the left and right sides slide in from the edges of the screen.
我想做的其中一件事是,左右两侧的两个刻度箭头从屏幕边缘滑入。
I know I can do this with absolute positioning, but this grid doesn't have anything else in absolute positions, and I don't want it to be. I want it to be inline so that if widths of certain elements have to change, the page moves with it.
我知道我可以通过绝对定位来做到这一点,但是这个网格在绝对位置上没有任何其他东西,我不希望它。我希望它是内联的,这样如果某些元素的宽度必须改变,页面就随之移动。
Is there a way I can animate the moving of these two elements from offscreen, while maintaining the inline positioning of all other blocks?
有没有办法可以动画从屏幕外移动这两个元素,同时保持所有其他块的内联定位?
2 个解决方案
#1
6
Fairly simple with transform: translate();
使用transform非常简单:translate();
Move the arrow offscreen by default using transformX, then animate it moving back into position.
默认情况下使用transformX将箭头移出屏幕,然后将其动画移回原位。
animation: slideInLeft 2s 1 forwards;
动画:slideInLeft 2s 1前锋;
animation: [name] [length] [iterations] [end]
动画:[名称] [长度] [迭代] [结束]
This runs the animation only once, for 2 seconds then stops at the end state.
这仅运行动画一次,持续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); }
}
Reverse for the right arrow.
反转右箭头。
:root {
--main-color0: rgba(000,000,000,0.5);
--main-color1: rgba(255,000,000,0.5);
--main-color2: rgba(000,255,255,0.5);
--main-color3: rgba(255,255,255,0.5);
--main-height: 50px;
--main-gutter: -10px;
--main-padding: 10px;
--main-border: 4px;
--font-family: 'Franklin Gothic';
--font-color: #FFFFFF;
--font-large: 24px;
--font-small: 14px;
--font-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000;
--arrow-width: 15px;
--round-width: 180px;
--player-width: 300px;
--score-width: 50px;
--out-speed: 0.5s;
--in-speed: 2s;
}
body {
color: var(--font-color);
font-family: var(--font-family);
font-size: var(--font-large);
text-shadow: var(--font-shadow);
line-height: var(--main-height);
margin: 10px 0;
text-align: center;
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 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px;
}
.round {
font-size: var(--font-small);
text-transform: uppercase;
width: var(--round-width);
-webkit-clip-path: polygon(
var(--arrow-width) 0,
0 calc(var(--main-height) / 2),
var(--arrow-width) var(--main-height),
calc(var(--round-width) - var(--arrow-width)) var(--main-height),
var(--round-width) calc(var(--main-height) / 2),
calc(var(--round-width) - var(--arrow-width)) 0
);
}
.player1 {
width: var(--player-width);
-webkit-clip-path: polygon(
0 0,
var(--arrow-width) calc(var(--main-height) / 2),
0 var(--main-height),
var(--player-width) var(--main-height),
calc(var(--player-width) - var(--arrow-width)) calc(var(--main-height) / 2),
var(--player-width) 0
);
}
.player2 {
width: var(--player-width);
-webkit-clip-path: polygon(
0 0,
var(--arrow-width) calc(var(--main-height) / 2),
0 var(--main-height),
var(--player-width) var(--main-height),
calc(var(--player-width) - var(--arrow-width)) calc(var(--main-height) / 2),
var(--player-width) 0
);
}
.player1 .title { padding: 0 20px; text-align: right; }
.player2 .title { padding: 0 20px; text-align: left; }
.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); }
}
.score2 {
width: var(--score-width);
-webkit-clip-path: polygon(
var(--arrow-width) 0,
0 calc(var(--main-height) / 2),
var(--arrow-width) var(--main-height),
var(--score-width) var(--main-height),
var(--score-width) calc(var(--main-height) / 2),
var(--score-width) 0
);
}
.score1 .title { padding: 0 20px 0 0; text-align: right; }
.score2 .title { padding: 0 0 0 20px; text-align: left; }
<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>
更多相关文章
- Python:内联if语句别无效
- Vue绑定内联样式问题
- 提供一个Android原生的Progress——SwipeToRefreshLayout下拉刷
- Android 5.X Activity过渡动画,以及漂亮的共享元素效果
- Android动画精讲一:从setTranslationX谈属性动画和view动画的区别
- [置顶] Animation之TranslateAnimation(平移动画)
- Android 属性动画(Property Animation)
- Android使用SVG矢量图打造酷炫动画效果
- Button点击缩放动画效果