Показать сообщение отдельно
  #24 (permalink)  
Старый 19.03.2019, 20:58
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вы напечатали код в посте №20...

Да, оно не работает, вам нужен sass c compass, autoprefixer и babel, которые превратили тот код в этот...

Ваш транспилированный пример
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Математический маятник</title>
	<style>

.mathematics_pendulum {
  width: 930px;
  height: 500px;
  background: linear-gradient(to top, #ade6ad, #e6e6cc);
  border-radius: 50px/35px;
  border: 1px solid #c0c0c0;
  position: absolute;
}

#still_point {
  display: inline-block;
  width: 1px;
  height: 1px;
  background: transparent;
  border: 45px solid transparent;
  border-top-color: #000080;
  position: absolute;
  left: 420px;
}

#pendulum {
  width: 75px;
  height: 400px;
  display: inline-block;
  position: absolute;
  top: 45px;
  left: 428px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
  animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
}

#pendulum_rod {
  width: 3px;
  height: 325px;
  background: #999;
  display: inline-block;
  border-radius: 2px;
  position: absolute;
  left: 36px;
}

#point_pendulum {
  width: 75px;
  height: 75px;
  display: inline-block;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, #bfbfff, #0000ff);
  position: absolute;
  top: 325px;
}

@-webkit-keyframes pendulum {
  0% {
    -webkit-transform: rotate(1.5708rad);
            transform: rotate(1.5708rad);
  }
  10% {
    -webkit-transform: rotate(-1.44982rad);
            transform: rotate(-1.44982rad);
  }
  20% {
    -webkit-transform: rotate(1.13998rad);
            transform: rotate(1.13998rad);
  }
  30% {
    -webkit-transform: rotate(-0.76361rad);
            transform: rotate(-0.76361rad);
  }
  40% {
    -webkit-transform: rotate(0.43574rad);
            transform: rotate(0.43574rad);
  }
  50% {
    -webkit-transform: rotate(-0.21183rad);
            transform: rotate(-0.21183rad);
  }
  60% {
    -webkit-transform: rotate(0.08772rad);
            transform: rotate(0.08772rad);
  }
  70% {
    -webkit-transform: rotate(-0.03095rad);
            transform: rotate(-0.03095rad);
  }
  80% {
    -webkit-transform: rotate(0.0093rad);
            transform: rotate(0.0093rad);
  }
  90% {
    -webkit-transform: rotate(-0.00238rad);
            transform: rotate(-0.00238rad);
  }
  100% {
    -webkit-transform: rotate(0.00052rad);
            transform: rotate(0.00052rad);
  }
}

@keyframes pendulum {
  0% {
    -webkit-transform: rotate(1.5708rad);
            transform: rotate(1.5708rad);
  }
  10% {
    -webkit-transform: rotate(-1.44982rad);
            transform: rotate(-1.44982rad);
  }
  20% {
    -webkit-transform: rotate(1.13998rad);
            transform: rotate(1.13998rad);
  }
  30% {
    -webkit-transform: rotate(-0.76361rad);
            transform: rotate(-0.76361rad);
  }
  40% {
    -webkit-transform: rotate(0.43574rad);
            transform: rotate(0.43574rad);
  }
  50% {
    -webkit-transform: rotate(-0.21183rad);
            transform: rotate(-0.21183rad);
  }
  60% {
    -webkit-transform: rotate(0.08772rad);
            transform: rotate(0.08772rad);
  }
  70% {
    -webkit-transform: rotate(-0.03095rad);
            transform: rotate(-0.03095rad);
  }
  80% {
    -webkit-transform: rotate(0.0093rad);
            transform: rotate(0.0093rad);
  }
  90% {
    -webkit-transform: rotate(-0.00238rad);
            transform: rotate(-0.00238rad);
  }
  100% {
    -webkit-transform: rotate(0.00052rad);
            transform: rotate(0.00052rad);
  }


	</style>
</head>
<body>
	<div tabindex="0" class="mathematics_pendulum" role="button" aria-label="Проиграть анимацию маятника" onclick="restartAnimation(this)" ontouchstart="restartAnimation(this)" onkeydown="restartAnimation(this)">
		<span id="still_point"></span>
		<span id="pendulum">
			<span id="pendulum_rod"></span>
			<span id="point_pendulum"></span>
		</span>
	</div>
	<script>
		
"use strict";

function restartAnimation(target) {
    var parentNode = target.parentNode;
    var comment = document.createComment("");

    parentNode.replaceChild(comment, target);
	
    setTimeout(function() {
        parentNode.replaceChild(target, comment);
    });
};

	</script>
</body>
</html>



Транспилированный пример с Codepen
<button class="pendulum"></button>

<style>

.pendulum {
  width: 255px;
  background: #cfe6cf;
  border-radius: 15px / 12px;
  border: 1px solid #c0c0c0;
  padding: 0;
}
.pendulum::before {
  content: "";
  display: block;
  width: 0;
  margin: auto;
  border: 15px solid transparent;
  border-top-color: #000080;
  border-bottom-width: 0;
}
.pendulum::after {
  content: "";
  display: block;
  margin: auto;
  margin-bottom: 8px;
  width: 25px;
  height: 100px;
  background: radial-gradient(closest-side circle at 50% 87.5%, #0000ff 90%, rgba(0, 0, 0, 0)), linear-gradient(to right, rgba(0, 0, 0, 0) 47%, #999999, rgba(0, 0, 0, 0) 53%);
  -webkit-mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, 0.3), #000000 136%);
  mask: radial-gradient(closest-side circle at 45% 84.5%, rgba(0, 0, 0, 0.3), #000000 136%);
  transform-origin: 50% 0;
  animation: pendulum 10.03545s cubic-bezier(0.36, 0, 0.64, 1) forwards;
}

@keyframes pendulum {
  0% {
    transform: rotate(1.5708rad);
  }
  10% {
    transform: rotate(-1.44982rad);
  }
  20% {
    transform: rotate(1.13998rad);
  }
  30% {
    transform: rotate(-0.76361rad);
  }
  40% {
    transform: rotate(0.43574rad);
  }
  50% {
    transform: rotate(-0.21183rad);
  }
  60% {
    transform: rotate(0.08772rad);
  }
  70% {
    transform: rotate(-0.03095rad);
  }
  80% {
    transform: rotate(0.0093rad);
  }
  90% {
    transform: rotate(-0.00238rad);
  }
  100% {
    transform: rotate(0.00052rad);
  }
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.matches"></script>
<script>

addEventListener("click", function(event) {
	const target = event.target;
	
	if(target.matches(".pendulum")) {
		const parentNode = target.parentNode;
		const comment = document.createComment("");

		parentNode.replaceChild(comment, target);
		
		setTimeout(function() {
			parentNode.replaceChild(target, comment);
		});
	}
});

</script>


Сложный вы путь выбрали, теперь транспилированный код вы будете редактировать как исходный...

Вопросы:
  • Почему среди возможных решений вы выбираете самое сложное и многословное?
  • В каком учебнике вы прочитали про ошибочное и проблемное учение «нажать на <div>», которое вы активно пытаетесь продвинуть?

Последний раз редактировалось Malleys, 20.03.2019 в 16:45.
Ответить с цитированием