У меня есть глупая веб-страница, которая представляет собой небольшой эксперимент, просто немного веселья. Страница состоит из тега <template> для добавления некоторого HTML в DOM либо при загрузке страницы, либо при некотором взаимодействии с пользователем. HTML - это 4 вложенных деления. Первый элемент div задает область для следующих двух соответствующих дочерних элементов div для анимации, поэтому он, кажется, подпрыгивает вокруг окна. Это прекрасно работает, когда я использую css ключевые кадры и анимирую, используя свойства translateX и translateY. Я доволен тем, что у меня есть. Если вы щелкнете по самому вложенному DIV (с именем класса "gustavo__image") или какой-нибудь текст на моей странице, другой шаблон внедряется в DOM. Это также прекрасно работает, но мне бы хотелось, чтобы начальная позиция каждого дублированного (а не первого) рендеринга шаблона начиналась с другого места. Это так, что анимация не такая повторяющаяся.
В моем коде я определяю, будет ли шаблон дубликатом, и пытаюсь установить свойства преобразования для этого DIV, например,
var gustavoTemplate = document.getElementsByTagName('template')[0];
if(isDuplicate) {
gustavoTemplate.getElementsByClassName('gustavo__x')[0].style.transform = 'translate(100px)';
}
* 1009. * Однако это не сработает, поскольку я знаю,
gustavoTemplate.getElementsByClassName('gustavo__x')[0] будет пустым.
При просмотре моего кода нужно ли ждать, пока я добавлю шаблон, чтобы установить его отправную точку? Могу ли я даже установить положение введенных DIV с помощью преобразования? Любая помощь приветствуется, и если я неправильно сформулировал это, пожалуйста, скажите, и я переделаю.
Вот полный код (jsBin здесь: https://jsbin.com/hirehen/edit?html, css, js, вывод )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>I love Safety io</title>
</head>
<style>
body {
background-color: DeepSkyBlue;
color: LightSeaGreen;
font-size: 5em;
font-family: Helvetica, sans-serif;
padding: 10px 10px;
font-weight: bold;
}
.intro {
color: white;
}
.gustavo {
position: absolute;
width: 100vw;
height: 100%;
top: 0px;
left: 0;
z-index: 1000;
pointer-events: none;
}
.gustavo__x {
animation: x 13s linear infinite alternate;
pointer-events: none;
}
.gustavo__y {
animation: y 7s linear infinite alternate;
pointer-events: none;
}
.gustavo__image {
background-image: url('Gustavo-Small.png');
background-repeat: no-repeat;
background-position: center;
height: 290px;
width: 290px;
pointer-events: all;
}
@keyframes x {
100% {
transform: translateX(calc(100vw - 290px));
}
}
@keyframes y {
100% {
transform: translateY( calc(100vh - 290px));
}
}
</style>
<body>
<div class="intro" onclick="showAnotherGustavo()">Want to see more?</div>
<template>
<div class="gustavo">
<div class="gustavo__x">
<div class="gustavo__y">
<div class="gustavo__image" onclick="showAnotherGustavo()"></div>
</div>
</div>
</div>
</template>
</body>
<script>
function showGustavo(isDuplicate) {
var gustavoTemplate = document.getElementsByTagName('template')[0];
// I want to change the starting point? But this doesn't work...
if(isDuplicate) {
// I need to set the transform properties of the divs with gustavo__x and gustavo__y classes
//gustavoTemplate.getElementsByClassName('gustavo__x')[0].style.transform = 'translate(100px)';
}
var clone = gustavoTemplate.content.cloneNode(true);
document.body.appendChild(clone);
}
function showAnotherGustavo() {
showGustavo(true);
}
window.onload = () => {
showGustavo()
}
</script>
</html>