Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 17.03.2019, 22:16
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Сообщение от Malleys
Не ясно, что же означает ваше «не могу зайти»! Я подумал, что может быть у вас отключен JavaScript, и выложил ссылку на архив.
зайти то могу, но ничего не видно - черный фон, но сверху справа только полбуквы "А" при клике на которую появляется рамка как возле полей формы при клике, тоже самое с кнопками 1,0 0,5 и 0,25 справа внизу, при клике на кнопки HTML CSS JS вообще ничего не происходит, могу перейти только на главную при клике на лого, и на твою страницу при клике на твой ник, кроме этих двух стр ничего не могу сделать.
Ответить с цитированием
  #22 (permalink)  
Старый 17.03.2019, 22:43
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

и архив скачать без регистрации нельзя, а зарегистрироваться не могу.
Ответить с цитированием
  #23 (permalink)  
Старый 18.03.2019, 06:50
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

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

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

Вы напечатали код в посте №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 в 15:45.
Ответить с цитированием
  #25 (permalink)  
Старый 20.03.2019, 12:05
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Сообщение от Malleys
Вопросы:
Почему среди возможных решений вы выбираете самое сложное и многословное?
В каком учебнике вы прочитали про ошибочное и проблемное учение «нажать на <div>», которое вы активно пытаетесь продвинуть?
1. наверное из-за ограниченых возможностей что у меня имеются.
2. У каждого художника свои любимые фломастеры, у каждого есть любимый цвет, любимый продукт питания, любимый напиток и т. д. но ни кто не может объяснить почему, так и тут, ну просто не нравится мне присутствие кнопки если можно обойтись кликом по див'у а почему не знаю.
Ответить с цитированием
  #26 (permalink)  
Старый 20.03.2019, 12:09
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

чет не работает у меня скрипт запуск анимации по клику, но зато сам маятник работает как надо.
Ответить с цитированием
  #27 (permalink)  
Старый 20.03.2019, 12:59
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 718

Сообщение от Блондинка
чет не работает у меня скрипт запуск анимации по клику, но зато сам маятник работает как надо.
Обновил пост №24, работает?

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

Сообщение от Блондинка
просто не нравится мне присутствие кнопки если можно обойтись кликом по див'у а почему не знаю.
: 🌚 Социальный троллинг?

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

Сообщение от Блондинка
У каждого художника свои любимые фломастеры...
Так это подмена понятии, у вас нет любимой кнопки, не так ли?

Последний раз редактировалось Malleys, 20.03.2019 в 13:06.
Ответить с цитированием
  #28 (permalink)  
Старый 20.03.2019, 13:44
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 266

Обычно пользуюсь Habit Browser , есть яндекс, восемь опер, хром, юсвеб, и стандарный что был в телефоне,
чёт опять не работает обновление анимации
Ответить с цитированием
  #29 (permalink)  
Старый 20.03.2019, 14:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,640

Сообщение от Malleys
UPD А, нет, просто среди возможных решений вы обычно выбираете самое сложное и многословное...
возможно разные возможности есть у вас, а блондинка (и я в том числе) о них и не подозревает.
и вопрос каким путём придти к решению, что на див нельзя кликать? почему?
Ответить с цитированием
  #30 (permalink)  
Старый 20.03.2019, 15:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 718

Сообщение от Блондинка
чёт опять не работает обновление анимации
сам скачал Habit Browser и проверил... теперь работает пост №24 в Habit Browser!

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

Вон, она ведь пишет...
Сообщение от Блондинка
чёт опять не работает обновление анимации
хотя там и стоит желанный <div onclick>, короче поменял обратно на <button>

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
отменить animation: для класса Black_Star (X)HTML/CSS 6 28.10.2016 10:06
css animation height ekkl-82 (X)HTML/CSS 17 30.10.2015 09:22
css анимация, плавный вовзрат к начальному значению FanAizu (X)HTML/CSS 0 30.01.2014 16:28
JQuery CSS анализатор javascript jQuery 2 15.08.2010 20:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 10:58