Форум

Блондинка · #21 (**permalink**) 17.03.2019, 23:16

Сообщение от Malleys

Не ясно, что же означает ваше «не могу зайти»! Я подумал, что может быть у вас отключен JavaScript, и выложил ссылку на архив.

зайти то могу, но ничего не видно - черный фон, но сверху справа только полбуквы "А" при клике на которую появляется рамка как возле полей формы при клике, тоже самое с кнопками 1,0 0,5 и 0,25 справа внизу, при клике на кнопки HTML CSS JS вообще ничего не происходит, могу перейти только на главную при клике на лого, и на твою страницу при клике на твой ник, кроме этих двух стр ничего не могу сделать.

Блондинка · #22 (**permalink**) 17.03.2019, 23:43

и архив скачать без регистрации нельзя, а зарегистрироваться не могу.

Блондинка · #23 (**permalink**) 18.03.2019, 07:50

Malleys,
возможно ли исправить код в 19 посте и скинуть в личку? только убедительная просьба, ничего не надо трогать в стиле и в теле страницы, в том смысле что не надо спаны заменять на псевдоклассы/псевдоэлементы, пусть так спаны и останутся

Malleys · #24 (**permalink**) 19.03.2019, 20:58

Вы напечатали код в посте №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>», которое вы активно пытаетесь продвинуть?

Блондинка · #25 (**permalink**) 20.03.2019, 13:05

Сообщение от Malleys

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

1. наверное из-за ограниченых возможностей что у меня имеются.
2. У каждого художника свои любимые фломастеры, у каждого есть любимый цвет, любимый продукт питания, любимый напиток и т. д. но ни кто не может объяснить почему, так и тут, ну просто не нравится мне присутствие кнопки если можно обойтись кликом по див'у а почему не знаю.

Блондинка · #26 (**permalink**) 20.03.2019, 13:09

чет не работает у меня скрипт запуск анимации по клику, но зато сам маятник работает как надо.

Malleys · #27 (**permalink**) 20.03.2019, 13:59

Сообщение от Блондинка

чет не работает у меня скрипт запуск анимации по клику, но зато сам маятник работает как надо.

Обновил пост №24, работает?

Что за браузер у вас?

Сообщение от Блондинка

просто не нравится мне присутствие кнопки если можно обойтись кликом по див'у а почему не знаю.

: 🌚 Социальный троллинг?

UPD А, нет, просто среди возможных решений вы обычно выбираете самое сложное и многословное...

Сообщение от Блондинка

У каждого художника свои любимые фломастеры...

Так это подмена понятии, у вас нет любимой кнопки, не так ли?

Блондинка · #28 (**permalink**) 20.03.2019, 14:44

Обычно пользуюсь Habit Browser , есть яндекс, восемь опер, хром, юсвеб, и стандарный что был в телефоне,
чёт опять не работает обновление анимации

рони · #29 (**permalink**) 20.03.2019, 15:26

Сообщение от Malleys

UPD А, нет, просто среди возможных решений вы обычно выбираете самое сложное и многословное...

возможно разные возможности есть у вас, а блондинка (и я в том числе) о них и не подозревает.
и вопрос каким путём придти к решению, что на див нельзя кликать? почему?

Malleys · #30 (**permalink**) 20.03.2019, 16:52

Сообщение от Блондинка

чёт опять не работает обновление анимации

сам скачал Habit Browser и проверил... теперь работает пост №24 в Habit Browser!

рони, Да, <div onclick> работает с мышью и в телефоне в новых браузерах, но оно не работает с клавиатуры, оно не работает на телефоне в некоторых браузерах (в том числе в Habit Browser, которым пользуется Блондинка), оно не работает на Android TV, оно не воспринимается скинридерами как кнопка ...

Вон, она ведь пишет...

Сообщение от Блондинка

чёт опять не работает обновление анимации

хотя там и стоит желанный <div onclick>, короче поменял обратно на <button>

Форум

Справочник

Discord чат

Курсы javascript