Javascript.RU

Форум

 Учебник Node.JS скринкаст Стандарт языка

Справочник

Discord чат

  
Статьи Тест знаний Аналоги функций PHP

Курсы javascript

  Сообщения за день

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.02.2017, 18:04
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star 		 
Регистрация: 11.07.2016
Сообщений: 300

Перевод SMIL анимации в JS (часть вторая)
Добрый день уважаемые. Есть такое пример анимации
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

<style>
	#Heart {
	width: 600px;
	border: 1px solid #000;
	cursor: pointer;
}

#Heart .tailMainPath {
  -webkit-animation: tailStroke 800ms linear;
          animation: tailStroke 800ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#Heart .tailMainPathReturn {
  -webkit-animation: tailStrokeReturn 800ms linear;
          animation: tailStrokeReturn 800ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes tailStroke {
  0% {
    stroke-dasharray: 0 149.425;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 149.425 0;
    stroke-dashoffset: 149.425;
  }
}

@keyframes tailStroke {
  0% {
    stroke-dasharray: 0 149.425;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 149.425 0;
    stroke-dashoffset: 149.425;
  }
}

@-webkit-keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 149.425 0;
    stroke-dashoffset: 149.425;
  }
  100% {
    stroke-dasharray: 0 149.425;
    stroke-dashoffset: 0;
  }
}

@keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 149.425 0;
    stroke-dashoffset: 149.425;
  }
  100% {
    stroke-dasharray: 0 149.425;
    stroke-dashoffset: 0;
  }
}
</style>

<body>

	<svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">

	<defs>
		<path id="PathTail_MainPath"   d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
		c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
		<path id="PathTail_MainUp"   d="M295.2,254.3 305.7,241.2"/>
		<path id="PathTail_MainBottom"   d="M295.2,254.3 307.4,258"/>

		<path id="tailMainPath"  d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
		c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>

		<path id="tailMainUp" d="M296.8,252.3 305.7,241.2"/>
		<path id="tailMainBottom" d="M295.2,254.3 307.4,258"/>
		
	</defs>

	<use xlink:href="#PathTail_MainPath" fill="none";   stroke="#000" stroke-width="11"/>
	<use xlink:href="#tailMainPath" fill="none";  stroke="#A50808"  stroke-linecap="round"  stroke-width="9"/>
</svg>

<script>
	window.onload =function(){


		var	myHeart = $("#Heart");
		var current = 0;

		var PathTail_MainPath = $("#PathTail_MainPath");
		var tailMainPath = $("#tailMainPath");

		myHeart.click(function () {

			if (current++ % 2 == 0) {

	 		 //  PathTail_MainPath.toggleClass("tailMainPath, tailMainPathReturn");
			// tailMainPath.toggleClass("tailMainPath, tailMainPathReturn");

			PathTail_MainPath.removeClass("tailMainPathReturn");
			tailMainPath.removeClass("tailMainPathReturn");

			PathTail_MainPath.addClass("tailMainPath");
			tailMainPath.addClass("tailMainPath");

			console.log("one");
		} else {

			PathTail_MainPath.removeClass("tailMainPath");
			tailMainPath.removeClass("tailMainPath");

			PathTail_MainPath.addClass("tailMainPathReturn");
			tailMainPath.addClass("tailMainPathReturn");

	  //       PathTail_MainPath.toggleClass("tailMainPath, tailMainPathReturn");
			// tailMainPath.toggleClass("tailMainPath, tailMainPathReturn");
			console.log("two");
		}
	});

};
</script>
</body>
</html>

Подскажите пожалуйста, таких два момента как решить:
1) Почему на втором действии остается красная точка от пути?Как от этого избавится?
2) Почему у меня не получается переписать JS код под .toggleClass ?(Оно мне сразу добавляет и стирает оба класса)
Ответить с цитированием
  #2 (permalink)  
Старый 15.02.2017, 21:16
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star 		 
Регистрация: 11.07.2016
Сообщений: 300

Методом научного тыка, удалось выяснить что .toggleClass() работает адекватно только если один из классов уже имеется. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
 
<style>
    #Heart {
    width: 600px;
    border: 1px solid #000;
    cursor: pointer;
}
 
#Heart .tailMainPath {
  -webkit-animation: tailStroke 500ms linear;
          animation: tailStroke 500ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#Heart .tailMainPathReturn {
  -webkit-animation: tailStrokeReturn 500ms linear 125ms;
          animation: tailStrokeReturn 500ms linear 125ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes tailStroke {
  0% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
}

@keyframes tailStroke {
  0% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
}

@-webkit-keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
  100% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
}

@keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
  100% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
}
</style>
 
<body>
 
    <svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
 
    <defs>
        <path id="PathTail_MainPath" class="tailMainPathReturn"  d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
        c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
 
        <path id="tailMainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
        c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
         
    </defs>
 
    <use xlink:href="#PathTail_MainPath" fill="none";   stroke="#000" stroke-width="11"/>
    <use xlink:href="#tailMainPath" fill="none";  stroke="#A50808"  stroke-linecap="round"  stroke-width="9"/>
</svg>
 
<script>
    window.onload =function(){
 
 
        var myHeart = $("#Heart");
        var current = 0;
 
        var PathTail_MainPath = $("#PathTail_MainPath");
        var tailMainPath = $("#tailMainPath");
 
        myHeart.click(function () {
 
            if (current++ % 2 == 0) {
 			
 			PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
			tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
 
            console.log("one");
        } else {
 
        	PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
			tailMainPath.toggleClass("tailMainPath tailMainPathReturn");

            console.log("two");
        }
    });
 
};
</script>
</body>
</html>

Буду очень благодарен если кто-то подскажет откуда ж берется та фигова точка, и как от нее избавится
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2017, 00:17
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK 		 
Регистрация: 16.09.2009
Сообщений: 253

Кривовато, но точка исчезла
Вoт к сожалению, изучил svg не очень хорошо. Но, точка устранилась, хотя и "кривым решением".
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
 
<style>
    #Heart {
    width: 600px;
    border: 1px solid #000;
    cursor: pointer;
}
 
#Heart .tailMainPath {
  -webkit-animation: tailStroke 500ms linear;
          animation: tailStroke 500ms linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#Heart .tailMainPathReturn {
  -webkit-animation: tailStrokeReturn 500ms linear 125ms;
          animation: tailStrokeReturn 500ms linear 125ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes tailStroke {
  0% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
    stroke-width: 9;
  }
  99% {
    stroke-width: 9;
  }
  100% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
}

@keyframes tailStroke {
  0% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
    stroke-width: 9;
  }
  99% {
    stroke-width: 9;
  }
  100% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
  }
}

@-webkit-keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
    stroke-width: 9;
  }
  99% {
    stroke-width: 9;
  }
  100% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
    stroke-width: 0;
  }
}

@keyframes tailStrokeReturn {
  0% {
    stroke-dasharray: 150 0;
    stroke-dashoffset: 150;
    stroke-width: 9;
  }
  99% {
    stroke-width: 9;
  }
  100% {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
    stroke-width: 0;
  }
}
</style>
 
<body>
 
    <svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
 
    <defs>
        <path id="PathTail_MainPath" class="tailMainPathReturn"  d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
        c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
 
        <path id="tailMainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
        c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
         
    </defs>
 
    <use xlink:href="#PathTail_MainPath" fill="none";   stroke="#000" stroke-width="11"/>
    <use xlink:href="#tailMainPath" fill="none";  stroke="#A50808"  stroke-linecap="round"  stroke-width="9"/>
</svg>
 
<script>
        var current = 0;
    window.onload =function(){
 
 
        var myHeart = $("#Heart");
 
        var PathTail_MainPath = $("#PathTail_MainPath");
        var tailMainPath = $("#tailMainPath");
 
        myHeart.click(function () {
 
            if (current++ % 2 == 0) {
 			
 			PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
			tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
 
            console.log("one");
        } else {
 
        	PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
			tailMainPath.toggleClass("tailMainPath tailMainPathReturn");

            console.log("two");
        }
    });
 
};
</script>
</body>
</html>
Точка, по-видимому, берётся из-за обнуления(?) пути(???), что самому интересно.
P.S.: Пытался устранить точку разными способами…
Последний раз редактировалось Paguo-86PK, 16.02.2017 в 00:30.
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2017, 10:45
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star 		 
Регистрация: 11.07.2016
Сообщений: 300

Спасибо, за совет.
Хотя метод действительно диковинный
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2017, 16:01
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star 		 
Регистрация: 11.07.2016
Сообщений: 300

Вообщем если долго посидеть проблему можно решить)
http://codepen.io/BlackStar1991/pen/dNLNrZ
Ещё раз спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 16.02.2017, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,121

Black_Star,
Ответить с цитированием
Ответ

« Как написать скрипт для проверки несколько логинов и паролей в одном input ? | Создание условия »


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перевод на новую строку JS воспринимает как объект DOM Rig Events/DOM/Window 6 26.12.2011 20:08
вопрос про возможности JS для рисования и анимации macdack Библиотеки/Тулкиты/Фреймворки 3 15.07.2011 00:13
Cоздание анимации на JS и Canvas Severtain Общие вопросы Javascript 5 14.05.2011 20:40
Перевод кодировки на JS utf8<->wind1251 SunnyDay Общие вопросы Javascript 3 04.09.2009 14:25
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 20:43


© Илья Кантор, 2007-2021 О проекте - Обратная связь - Архив форума - Вверх