JqueryUI Explode - откуда приходит цвет? - PullRequest
Новая
       1

JqueryUI Explode - откуда приходит цвет?

0 голосов
/ 06 декабря 2018

Я работаю над анимацией и хочу, чтобы в какой-то момент появился всплывающий шарик.Я обнаружил Explode в jQueryUi и решил попробовать.У меня это взрывается, но части, кажется, не имеют цвета.Я не могу найти, откуда они должны получить свой цвет.В примерах цвет кажется таким же, как у элемента, но это не происходит для меня.Это потому, что это элемент в SVG?

Примеры, на которые я ссылался:

https://www.tutorialspoint.com/jquery/effect-explode.htm

https://api.jqueryui.com/explode-effect/

Вы можете видеть этопроисходит примерно через 20 секунд на воздушном шаре, несущем черепаху, когда она останавливается. 

$(document).ready(function() {
	$( "#ballon" ).delay(20000).toggle( "explode" );
}); //end document.ready
html {
	box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
  box-sizing: inherit;
}
html, body { 
	margin:0; 
	padding:0; 
	overflow:hidden; 
	width: 100vw;
	height: 100vh;
}


.BalloonContainer {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.flying img {
	max-width: 150px;
	position: absolute;
	top: 20px;
	transform: translateX(-30vw);
	animation: moveBird 2s linear 22s 1 forwards;
}

@-webkit-keyframes moveBird {
  0% {
    transform: translateX(-30vw) rotate(3deg);
    
  }
  50% {
	transform: rotate(-3deg);
  }
  100% {
    transform: translateX(45vw) rotate(3deg);
    
  }
}

.initialBalloon {
  position: absolute;
  /* moves initial position before animating */
  transform: translateX(100vw);
  top: 150px;
  animation: moveFirst 2s linear .2s 1;
  
  width: 150px;
}

.firstBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 150px;
  animation: move 5s linear 5s infinite;
  width: 150px;
}

.secondBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 200px;
  animation: move 8s linear 0s infinite;
  width: 150px;
}

.thirdBalloon {
  top: 250px;
  transform: translateX(-30vw);
  position: absolute;
  animation: move 11s linear 1s infinite;
  width: 150px;
}
.turtle {
  position: absolute;
  top: 50px;
  transform: translateX(-50vw); 
  
  animation: moveTurtle 5s linear 1s 1 none, 
  moveTurtleStop 11s linear 6s 1 forwards, 
  moveTurtleRotate 5s linear 17s infinite;  
  width: 250px;
}



@-webkit-keyframes moveTurtle {
  0% {
    transform: translateX(-50vw) rotate(10deg);
    
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
    
  }
}

 @-webkit-keyframes moveTurtleRotate {
  0% {
    transform: translateX(50vw) rotate(10deg);    
  }
  50% {
	transform: translateX(50vw) rotate(-5deg);
  }
  100% {
    transform: translateX(50vw) rotate(10deg);    
  }
} 

@-webkit-keyframes moveTurtleStop {
  0% {
    transform: translateX(-50vw) rotate(10deg);
    
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(50vw) rotate(10deg);
    
  }
}

@-webkit-keyframes move {
  0% {
    transform: translateX(-30vw) rotate(10deg);
    
  }
  50% {
	transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
    
  }
}

@-webkit-keyframes moveFirst {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
	transform: translateX(75vw) transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="BalloonContainer">
		<div class="flying">
			<img src="https://williamcunningham.me/happy_birthday_2019/img/flyNew.gif" alt="">
		</div>
		<div class="initialBalloon swingimage">
			<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_1p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_1" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="firstBalloon swingimage">
			<svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_2p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_2" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="secondBalloon swingimage">
			<svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_3p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_3" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="thirdBalloon swingimage">
			<svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_4p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_4" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
		</div>
		<div class="turtle swingimage">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.09 179.26"><defs><style>.cls-1{fill:#171618;}.cls-2{fill:#efefef;}</style></defs><title>fullTurtle</title><g id="balloonTotal"><path id="ballon" class="cls-1" d="M34.13,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S49.13-3.74,34.13,1.26Z"/><path id="highlight" class="cls-2" d="M37.13,6.26s-15,6-13,20h6S27.13,14.26,37.13,6.26Z"/><polygon id="string" class="cls-1" points="41.13 125.26 43.2 57.26 44.37 57.26 45.13 125.26 41.13 125.26"/></g><g id="turtle"><path id="body" class="cls-1" d="M37.13,122.26s-18-1-33,20c0,0-5,1-4,4s8,8,6,11-7,9-4,12,15-6,15-6,18,12,41,1c0,0,2,0,2,4s-1,11,2,11,10-12,10-12,4-4,1-7c0,0-2-2-1-3s7-6,11-1,4,7,10,7,14-3,14-3,5-2,2-6a39.88,39.88,0,0,0-7-7s-2-3-7-2-10,3-8,1,2-3-1-3c-1,0-18-16-29-18S45.13,122.26,37.13,122.26Z"/><path id="highlight-2" data-name="highlight" class="cls-2" d="M5.13,145.26s26,36,76,0C81.13,145.26,34.13,188.26,5.13,145.26Z"/><circle id="eye" class="cls-2" cx="97.63" cy="152.76" r="4.5"/><circle id="eyeball" class="cls-1" cx="99.13" cy="152.26" r="1"/></g></svg>	
		</div>
	</div>

1 Ответ

0 голосов
/ 07 декабря 2018

Я подозреваю, что это связано с использованием элемента <svg><path> против <div> или <img>.

Если мы разберем это с более тонкой версией, мы увидим, что происходит: 

$(function() {
  $("#ballon, #highlight").delay(30 * 1000).toggle("explode", {
    pieces: 16
  }, 500);

  $(".flying img").delay(32 * 1000).toggle("explode", {
    pieces: 42
  }, 2000);
});
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  /* allow all elements to inherit box-sizing */
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.BalloonContainer {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.flying img {
  max-width: 150px;
  position: absolute;
  top: 20px;
  transform: translateX(-30vw);
  animation: moveBird 2s linear 22s 1 forwards;
}

@-webkit-keyframes moveBird {
  0% {
    transform: translateX(-30vw) rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: translateX(45vw) rotate(3deg);
  }
}

.initialBalloon {
  position: absolute;
  /* moves initial position before animating */
  transform: translateX(100vw);
  top: 150px;
  animation: moveFirst 2s linear .2s 1;
  width: 150px;
}

.firstBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 150px;
  animation: move 5s linear 5s infinite;
  width: 150px;
}

.secondBalloon {
  position: absolute;
  transform: translateX(-30vw);
  top: 200px;
  animation: move 8s linear 0s infinite;
  width: 150px;
}

.thirdBalloon {
  top: 250px;
  transform: translateX(-30vw);
  position: absolute;
  animation: move 11s linear 1s infinite;
  width: 150px;
}

.turtle {
  position: absolute;
  top: 50px;
  transform: translateX(-50vw);
  animation: moveTurtle 5s linear 1s 1 none, moveTurtleStop 11s linear 6s 1 forwards, moveTurtleRotate 5s linear 17s infinite;
  width: 250px;
}

@-webkit-keyframes moveTurtle {
  0% {
    transform: translateX(-50vw) rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}

@-webkit-keyframes moveTurtleRotate {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
    transform: translateX(50vw) rotate(-5deg);
  }
  100% {
    transform: translateX(50vw) rotate(10deg);
  }
}

@-webkit-keyframes moveTurtleStop {
  0% {
    transform: translateX(-50vw) rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: translateX(50vw) rotate(10deg);
  }
}

@-webkit-keyframes move {
  0% {
    transform: translateX(-30vw) rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}

@-webkit-keyframes moveFirst {
  0% {
    transform: translateX(50vw) rotate(10deg);
  }
  50% {
    transform: translateX(75vw) transform: rotate(-5deg);
  }
  100% {
    transform: translateX(100vw) rotate(10deg);
  }
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div class="BalloonContainer">
  <div class="flying">
    <img src="https://williamcunningham.me/happy_birthday_2019/img/flyNew.gif" alt="">
  </div>
  <!--
  <div class="initialBalloon swingimage">
    <svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_1p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_1" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
  </div>
  <div class="firstBalloon swingimage">
    <svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_2p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_2" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
  </div>
  <div class="secondBalloon swingimage">
    <svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_3p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_3" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
  </div>
  <div class="thirdBalloon swingimage">
    <svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_4p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_4" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
	    		<polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
  </div>
  -->
  <div class="turtle swingimage">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.09 179.26"><defs><style>.cls-1{fill:#171618;}.cls-2{fill:#efefef;}</style></defs><title>fullTurtle</title><g id="balloonTotal"><path id="ballon" class="cls-1" d="M34.13,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S49.13-3.74,34.13,1.26Z"/><path id="highlight" class="cls-2" d="M37.13,6.26s-15,6-13,20h6S27.13,14.26,37.13,6.26Z"/><polygon id="string" class="cls-1" points="41.13 125.26 43.2 57.26 44.37 57.26 45.13 125.26 41.13 125.26"/></g><g id="turtle"><path id="body" class="cls-1" d="M37.13,122.26s-18-1-33,20c0,0-5,1-4,4s8,8,6,11-7,9-4,12,15-6,15-6,18,12,41,1c0,0,2,0,2,4s-1,11,2,11,10-12,10-12,4-4,1-7c0,0-2-2-1-3s7-6,11-1,4,7,10,7,14-3,14-3,5-2,2-6a39.88,39.88,0,0,0-7-7s-2-3-7-2-10,3-8,1,2-3-1-3c-1,0-18-16-29-18S45.13,122.26,37.13,122.26Z"/><path id="highlight-2" data-name="highlight" class="cls-2" d="M5.13,145.26s26,36,76,0C81.13,145.26,34.13,188.26,5.13,145.26Z"/><circle id="eye" class="cls-2" cx="97.63" cy="152.76" r="4.5"/><circle id="eyeball" class="cls-1" cx="99.13" cy="152.26" r="1"/></g></svg>
  </div>
</div>

Поскольку этот метод ожидает элемент HTML, я подозреваю, что он сталкивается с проблемами объекта, преобразующими объект SVG.Я пытаюсь исследовать эту функцию jQuery с SVG, но пока не нашел много деталей.

Надеюсь, это поможет прояснить ситуацию.Вы также можете скрыть еще один SVG, который помогает анимировать pop или не использовать SVG.Не уверен, что лучше.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...