Анимировать деление с экрана, без абсолютных позиций?

78 просмотра

2 ответа

У меня есть табло ... Это табло представляет собой серию встроенных блоков, чтобы держать его в горизонтальном положении:

<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) ... У меня работают все анимации, кроме одной.

Одна из вещей, которую я хотел бы сделать, - это чтобы две стрелы слева и справа скользили по краям экрана.

Я знаю, что могу сделать это с абсолютным позиционированием, но в этой сетке больше нет ничего в абсолютных позициях, и я не хочу, чтобы это было. Я хочу, чтобы он был встроенным, чтобы при изменении ширины определенных элементов страница перемещалась вместе с ним.

Есть ли способ, которым я могу анимировать перемещение этих двух элементов из-за экрана, сохраняя при этом линейное позиционирование всех других блоков?

Автор: Jason Axelrod Источник Размещён: 08.11.2019 11:02

Ответы (2)


6 плюса

Решение

Довольно просто с 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 {
	--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>

Автор: Scott Размещён: 20.08.2016 08:13

1 плюс

Вы можете сделать это с добрым старым position: relative:

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

Используя transition/ animationвы также можете обойтись без jQuery.

В качестве альтернативы вы можете использовать transform: translate(...), или даже лучше, translateX(...)который запускает 3D-преобразования, и, таким образом, нагрузка, скорее всего, закончится на GPU, а не на CPU, что, возможно, даст лучшую производительность.

Автор: MaxArt Размещён: 20.08.2016 08:13
Вопросы из категории :
32x32