Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #36749 > unrolled thread

Animation playing while a form is submitted, part 3

Back to article view | Back to comp.lang.javascript

Contents

  Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-03 03:25 -0700
    Re: Animation playing while a form is submitted, part 3 JJ <jj4public@vfemail.net> - 2019-06-04 00:11 +0700
      Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-04 00:18 -0700
        Re: Animation playing while a form is submitted, part 3 JJ <jj4public@vfemail.net> - 2019-06-05 10:08 +0700
          Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-04 23:48 -0700
            Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-05 03:21 -0700
              Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-05 23:42 -0700
                Re: Animation playing while a form is submitted, part 3 Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-06-06 11:25 +0100
                  Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-06 23:16 -0700
                    Re: Animation playing while a form is submitted, part 3 "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-06-07 09:53 +0200
                    Re: Animation playing while a form is submitted, part 3 Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-06-08 21:44 +0100
                      Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-10 00:21 -0700
                        Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-10 00:24 -0700
                        Re: Animation playing while a form is submitted, part 3 Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-06-10 14:26 +0100
                          Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-10 23:33 -0700
                            Re: Animation playing while a form is submitted, part 3 Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-06-11 12:18 +0100
                              Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-12 10:08 -0700
                                Re: Animation playing while a form is submitted, part 3 Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-06-12 20:15 +0100
                                  Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-12 23:32 -0700
                                    Re: Animation playing while a form is submitted, part 3 "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-06-13 12:14 +0200
                                      Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-14 00:09 -0700
                                        Re: Animation playing while a form is submitted, part 3 "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-06-14 16:00 +0200
                                    Re: Animation playing while a form is submitted, part 3 Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-06-13 12:47 +0100
                                      Re: Animation playing while a form is submitted, part 3 groovee@cyberdude.com - 2019-06-14 00:05 -0700

Page 1 of 2  [1] 2  Next page →

#36749 — Animation playing while a form is submitted, part 3

OK, so I have a form, which, when the Submit button is clicked, it animates. I've got code like this in the CSS:

@keyframes spinit {
  from {
    transform: rotate3d(1,0,0,0deg);
  }
  to {
    transform: rotate3d(1,0,0,360deg);
  }
}


.spinclass {
	animation-name: spinit;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	blah blah
	}


...and then this in the JS:

      ajaxRequest.send(null);
   
        pinkbox.style.transition="transform 1s";	// box fly back
	pinkbox.style.transform="perspective(200px) translateZ(-200px)";
   
   
        pinkbox.className =  "spinclass";



I want the box to fly back into the distance a little, THEN spin. However amazingly, when I run the code above, the spin happens FIRST, and THEN the box becomes small, EVEN THOUGH THE "TRANSLATEZ" IS *BEFORE* THE "spinclass" STUFF!!! If I comment out the "spinclass" line, then it becomes small on it's own just fine!
I'm finding this quite amazing, never have I ever heard of a *subsequent* line being executed first, in all my time coding - what exactly is going on???



Thanks for your help.

[toc] | [next] | [standalone]

#36752

On Mon, 3 Jun 2019 03:25:22 -0700 (PDT), groovee@cyberdude.com wrote: 
> OK, so I have a form, which, when the Submit button is clicked, it
> animates.. I've got code like this in the CSS: 
> 
> @keyframes spinit { from { transform: rotate3d(1,0,0,0deg); } to {
> transform: rotate3d(1,0,0,360deg); } } 
> 
> ..spinclass { animation-name: spinit; animation-duration: 1s;
> animation-iteration-count: infinite; animation-timing-function: linear;
> blah blah } 
> 
> ....and then this in the JS: 
> 
> ajaxRequest.send(null); 
> 
> pinkbox.style.transition="transform 1s";	// box fly back
> pinkbox.style.transform="perspective(200px) translateZ(-200px)"; 
> 
> 
> 
> pinkbox.className =  "spinclass"; 
> 
> I want the box to fly back into the distance a little, THEN spin. However
> amazingly, when I run the code above, the spin happens FIRST, and THEN
> the box becomes small, EVEN THOUGH THE "TRANSLATEZ" IS *BEFORE* THE
> "spinclass" STUFF!!! If I comment out the "spinclass" line, then it
> becomes small on it's own just fine! I'm finding this quite amazing,
> never have I ever heard of a *subsequent* line being executed first, in
> all my time coding - what exactly is going on??? 
> 
> Thanks for your help.

Both actually happens at the same time. You just don't notice the transition
startup because its timing function is `ease` by default. Use `linear` to
make it more noticable.

[toc] | [prev] | [next] | [standalone]

#36756

On Monday, 3 June 2019 22:41:31 UTC+5:30, JJ  wrote:

> 
> Both actually happens at the same time. You just don't notice the transition
> startup because its timing function is `ease` by default. Use `linear` to
> make it more noticable.

OK,I did this:

       ajaxRequest.send(null);
   
	pinkbox.style.transitionTimingFunction = "linear";
    	pinkbox.style.transition="transform 1s";	// box fly back
	pinkbox.style.transform="perspective(200px) translateZ(-200px)";
   
   
        pinkbox.className =  "spinclass";


Still not working :(
Btw, Firefox's Inspector is showing "translateZ(-200px)"!!!

This is my entire "spinclass", if it matters:

.spinclass {
	animation-name: spinit;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: #FE329A solid 5px;
	width: 60%;
        margin: 0 auto;
        background: pink;
        margin-top:5px;
        font-family:Arial, Helvetica, sans-serif;
	}

[toc] | [prev] | [next] | [standalone]

#36775

On Tue, 4 Jun 2019 00:18:17 -0700 (PDT), groovee@cyberdude.com wrote:
> 	pinkbox.style.transitionTimingFunction = "linear";
>     	pinkbox.style.transition="transform 1s";	// box fly back

That second line overwrites the timing function.

[toc] | [prev] | [next] | [standalone]

#36780

On Wednesday, 5 June 2019 08:39:06 UTC+5:30, JJ  wrote:

> That second line overwrites the timing function.

I did this, Still not working:

       ajaxRequest.send(null);
     
       pinkbox.style.transitionTimingFunction = "linear"; 
       pinkbox.style.transform="perspective(200px) translateZ(-200px)";
 
       pinkbox.className =  "spinclass";


It still spins FIRST, *THEN* becomes small :( What do I do?

[toc] | [prev] | [next] | [standalone]

#36783

OK, I saw on the right hand that Firefox is showing, while the spinning happens, that 

    transform: perspective(200px) translateZ(-200px);

is crossed out with a line, that is, it's an Overridden declaration. I'm not sure what's causing it, I have this right up top in my code:

	var pinkbox = document.getElementsByClassName('container')[0];
	
	
	window.onload = (function(){
	pinkbox.style.transition = "transform 1s";
	pinkbox.style.transform = "perspective(0px) translateZ(0px)";
	}
	);

, and "container"'s CSS has this:

.container {
		transform: perspective(200px) translateZ(-200px);
                blah blah
}


Do you think that's the problem?? What must I do?

[toc] | [prev] | [next] | [standalone]

#36796

Hi? Anyone here? :)

[toc] | [prev] | [next] | [standalone]

#36806

groovee@cyberdude.com writes:

> Hi? Anyone here? :)

Yes.  I guarantee you will get at least one reply if you post a link to
live example that illustrates the problem.  It would help if you also
stated what the problem actually is: the document does X and I'd like to
see Y.  As it is, all I can tell is that the a CSS rules is shown
crossed out (a very common occurrence), and presumably you'd like it not
to be crossed out!

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#36819

On Thursday, 6 June 2019 15:55:49 UTC+5:30, Ben Bacarisse  wrote:

> Yes.  I guarantee you will get at least one reply if you post a link to
> live example that illustrates the problem.  It would help if you also
> stated what the problem actually is: the document does X and I'd like to
> see Y.  As it is, all I can tell is that the a CSS rules is shown
> crossed out (a very common occurrence), and presumably you'd like it not
> to be crossed out!
> 
> -- 
> Ben.

Er - I'm not sure I wanna *put* all my code online, if that's alright :)
I think I HAVE quoted all the important parts above - what I want is, the box should *first* go backwards into the distance, and *then* start spinning. Does that help? :) I haven't uncovered a browser *bug* or something, have I? :)

[toc] | [prev] | [next] | [standalone]

#36820

groovee@cyberdude.com wrote on 07 Jun 2019 in comp.lang.javascript:

> On Thursday, 6 June 2019 15:55:49 UTC+5:30, Ben Bacarisse  wrote:
> 
>> Yes.  I guarantee you will get at least one reply if you post a link to
>> live example that illustrates the problem.  It would help if you also
>> stated what the problem actually is: the document does X and I'd like
>> to see Y.  As it is, all I can tell is that the a CSS rules is shown
>> crossed out (a very common occurrence), and presumably you'd like it
>> not to be crossed out!
>> 
>> -- 
>> Ben.
> 
> Er - I'm not sure I wanna *put* all my code online, if that's alright :)

"All your code" is not a "live example".

If a live example, you can help yourself,
if not, perhapse we can help you.

> I think I HAVE quoted all the important parts above - what I want is,
> the box should *first* go backwards into the distance, and *then* start
> spinning. Does that help? :) I haven't uncovered a browser *bug* or
> something, have I? :) 
> 
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#36853

groovee@cyberdude.com writes:

> On Thursday, 6 June 2019 15:55:49 UTC+5:30, Ben Bacarisse  wrote:
>
>> Yes.  I guarantee you will get at least one reply if you post a link to
>> live example that illustrates the problem.  It would help if you also
>> stated what the problem actually is: the document does X and I'd like to
>> see Y.  As it is, all I can tell is that the a CSS rules is shown
>> crossed out (a very common occurrence), and presumably you'd like it not
>> to be crossed out!
>> 
>
> Er - I'm not sure I wanna *put* all my code online, if that's alright
> :)

I didn't say all you code!

> I think I HAVE quoted all the important parts above - what I want is,
> the box should *first* go backwards into the distance, and *then*
> start spinning. Does that help? :) I haven't uncovered a browser *bug*
> or something, have I? :)

I don't know.  If you post a live example, I'll have a look, but I'm
more than happy for you not to do that as it will mean I won't feel
obliged to look!

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#36858

On Sunday, 9 June 2019 02:14:47 UTC+5:30, Ben Bacarisse  wrote:

> 
> I don't know.  If you post a live example, I'll have a look, but I'm
> more than happy for you not to do that as it will mean I won't feel
> obliged to look!


OK, I *tried* to sign up to Codepen, but their Signup process is on the blink right now :( ,.....so I'm just posting my page here:


<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>OuttaSite - Contact Us</title>
    <style>


.container {
		transform: perspective(200px) translateZ(-200px);
		border: #FE329A solid 5px;
		color: #FE329A;
        width: 60%;
        margin: 0 auto;
        background: pink;
        margin-top:5px;
        font-family:Arial, Helvetica, sans-serif;
        opacity: 0.5;
      }



      #myForm{
        padding:25px 15px 5px 15px;
        display: inline-block;
         vertical-align: top;
      }

      #ajaxDiv{
        padding: 0 0 25px 15px;
      }

 .label {
	 display: inline-block;
	 width: 70px;
	 text-align: right;
	 vertical-align: top;
	 margin-right: 10px;
	 }
#sendbutton {
		margin-top: 10px;
		margin-left: 80px;	
	}


@keyframes spinit {
  from {
    transform: rotate3d(1,0,0,0deg);
  }
  to {
    transform: rotate3d(1,0,0,360deg);
  }
}


.spinclass {
	animation-name: spinit;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: #FE329A solid 5px;
	width: 60%;
        margin: 0 auto;
        background: pink;
        margin-top:5px;
        font-family:Arial, Helvetica, sans-serif;
	}

#contactbox {
	border: #00C3AD solid 5px;
	width: 52%;
	padding: 50px;
        margin-left: 20%;
        background: pink;
        margin-top:5px;
        font-family:Arial, Helvetica, sans-serif;
	color: #00C3AD;
	background: #85FFFF;
	
	}



    </style>
  </head>

  <body bgcolor="black">
	  
	  <br>
	  <br>
	  
	  <div id="contactbox">
	  <div align="center" valign="center">
	  <font size="20">
		 
		  Contact Us
		  </font>
	 </div> 
	  </div>
	  

    <div class="container">
      <form name='myForm' id="myForm">

 <div>
 <p>
          <label class="label"><strong>Subject:</strong></label>
          <input type = "text" id = "subject" onfocus="makesolid()">
        </p>
 
 </div>
 
 
         <div>
          <label class="label" for="name"><strong>Message:</strong></label>

 <textarea rows="5" cols="60" id='message' onfocus="makesolid()">
Enter your message here.
</textarea> 

        </div>
 
        <div id="sendbutton">
          <input type='submit' value='SEND'>
        </div>
      </form>
<br/>
<br/>
<br/>

    </div>

    <script language="javascript" type="text/javascript">



	var pinkbox = document.getElementsByClassName('container')[0];
	
	
	window.onload = (function(){
	pinkbox.style.transition = "transform 1s";
	pinkbox.style.transform = "perspective(0px) translateZ(0px)";
	}
	);
	
function makesolid() {
		pinkbox.style.opacity=1;	
	}







      function ajaxFunction(e){
        e.preventDefault();

        var ajaxRequest;  // The variable that makes Ajax possible!
	    var ajaxDisplay = document.getElementById('ajaxDiv');	
    	var spin = true;
		
        try{
          // Opera 8.0+, Firefox, Safari
          ajaxRequest = new XMLHttpRequest();
        } catch (e){
          // Internet Explorer Browsers
          try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
            try{
              ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
              // Something went wrong
              alert("Your browser broke!");
              return false;
            }
          }
        }
       
       
        // Create a function that will receive data sent from the server
        ajaxRequest.onload = function() {
	    pinkbox.className="container";
		var ack =  ajaxRequest.responseText;
        if (ack === "OK") { pinkbox.innerHTML = "<br/><div align='center'><font size=10 color='#FE329A'>Message Sent. Thanks! :)<br/></font></div><br/>"; }
        };

		ajaxRequest.ontimeout = function (e) {
		pinkbox.className="container";
		pinkbox.innerHTML = "<br/><div align='center'><font size=10 color='#FE329A'>Message NOT Sent. Network Error?<br/><a href='contact.html'>Try Again</a> </font></div><br/>"; 
		};




        var subject = document.getElementById('subject').value;
        var message = document.getElementById('message').value;

        var queryString = "?subject=" + subject + "&message=" + message;
        ajaxRequest.open("GET", "http://localhost/sendmessage.php" + queryString, true);
 
        ajaxRequest.timeout = 10000; // time in milliseconds
 
        ajaxRequest.send(null);
   
       	pinkbox.style.transition="all 1s linear";
        pinkbox.style.transform="perspective(200px) translateZ(-200px)";
 
 
      pinkbox.className =  "spinclass";

      
      
 }

      var f = document.getElementById("myForm");
      f.onsubmit = ajaxFunction;


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

[toc] | [prev] | [next] | [standalone]

#36859

On Monday, 10 June 2019 12:51:30 UTC+5:30, gro...@cyberdude.com  wrote:
> On Sunday, 9 June 2019 02:14:47 UTC+5:30, Ben Bacarisse  wrote:
> 
> > 
> > I don't know.  If you post a live example, I'll have a look, but I'm
> > more than happy for you not to do that as it will mean I won't feel
> > obliged to look!
> 
> 
> OK, I *tried* to sign up to Codepen, but their Signup process is on the blink right now :( ,.....so I'm just posting my page here:
> 
> 
> <!DOCTYPE HTML>
> <html>
>   <head>
>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
>     <title>OuttaSite - Contact Us</title>
>     <style>
> 
> 
> .container {
> 		transform: perspective(200px) translateZ(-200px);
> 		border: #FE329A solid 5px;
> 		color: #FE329A;
>         width: 60%;
>         margin: 0 auto;
>         background: pink;
>         margin-top:5px;
>         font-family:Arial, Helvetica, sans-serif;
>         opacity: 0.5;
>       }
> 
> 
> 
>       #myForm{
>         padding:25px 15px 5px 15px;
>         display: inline-block;
>          vertical-align: top;
>       }
> 
>       #ajaxDiv{
>         padding: 0 0 25px 15px;
>       }
> 
>  .label {
> 	 display: inline-block;
> 	 width: 70px;
> 	 text-align: right;
> 	 vertical-align: top;
> 	 margin-right: 10px;
> 	 }
> #sendbutton {
> 		margin-top: 10px;
> 		margin-left: 80px;	
> 	}
> 
> 
> @keyframes spinit {
>   from {
>     transform: rotate3d(1,0,0,0deg);
>   }
>   to {
>     transform: rotate3d(1,0,0,360deg);
>   }
> }
> 
> 
> .spinclass {
> 	animation-name: spinit;
> 	animation-duration: 1s;
> 	animation-iteration-count: infinite;
> 	animation-timing-function: linear;
> 	border: #FE329A solid 5px;
> 	width: 60%;
>         margin: 0 auto;
>         background: pink;
>         margin-top:5px;
>         font-family:Arial, Helvetica, sans-serif;
> 	}
> 
> #contactbox {
> 	border: #00C3AD solid 5px;
> 	width: 52%;
> 	padding: 50px;
>         margin-left: 20%;
>         background: pink;
>         margin-top:5px;
>         font-family:Arial, Helvetica, sans-serif;
> 	color: #00C3AD;
> 	background: #85FFFF;
> 	
> 	}
> 
> 
> 
>     </style>
>   </head>
> 
>   <body bgcolor="black">
> 	  
> 	  <br>
> 	  <br>
> 	  
> 	  <div id="contactbox">
> 	  <div align="center" valign="center">
> 	  <font size="20">
> 		 
> 		  Contact Us
> 		  </font>
> 	 </div> 
> 	  </div>
> 	  
> 
>     <div class="container">
>       <form name='myForm' id="myForm">
> 
>  <div>
>  <p>
>           <label class="label"><strong>Subject:</strong></label>
>           <input type = "text" id = "subject" onfocus="makesolid()">
>         </p>
>  
>  </div>
>  
>  
>          <div>
>           <label class="label" for="name"><strong>Message:</strong></label>
> 
>  <textarea rows="5" cols="60" id='message' onfocus="makesolid()">
> Enter your message here.
> </textarea> 
> 
>         </div>
>  
>         <div id="sendbutton">
>           <input type='submit' value='SEND'>
>         </div>
>       </form>
> <br/>
> <br/>
> <br/>
> 
>     </div>
> 
>     <script language="javascript" type="text/javascript">
> 
> 
> 
> 	var pinkbox = document.getElementsByClassName('container')[0];
> 	
> 	
> 	window.onload = (function(){
> 	pinkbox.style.transition = "transform 1s";
> 	pinkbox.style.transform = "perspective(0px) translateZ(0px)";
> 	}
> 	);
> 	
> function makesolid() {
> 		pinkbox.style.opacity=1;	
> 	}
> 
> 
> 
> 
> 
> 
> 
>       function ajaxFunction(e){
>         e.preventDefault();
> 
>         var ajaxRequest;  // The variable that makes Ajax possible!
> 	    var ajaxDisplay = document.getElementById('ajaxDiv');	
>     	var spin = true;
> 		
>         try{
>           // Opera 8.0+, Firefox, Safari
>           ajaxRequest = new XMLHttpRequest();
>         } catch (e){
>           // Internet Explorer Browsers
>           try{
>             ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
>           } catch (e) {
>             try{
>               ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
>             } catch (e){
>               // Something went wrong
>               alert("Your browser broke!");
>               return false;
>             }
>           }
>         }
>        
>        
>         // Create a function that will receive data sent from the server
>         ajaxRequest.onload = function() {
> 	    pinkbox.className="container";
> 		var ack =  ajaxRequest.responseText;
>         if (ack === "OK") { pinkbox.innerHTML = "<br/><div align='center'><font size=10 color='#FE329A'>Message Sent. Thanks! :)<br/></font></div><br/>"; }
>         };
> 
> 		ajaxRequest.ontimeout = function (e) {
> 		pinkbox.className="container";
> 		pinkbox.innerHTML = "<br/><div align='center'><font size=10 color='#FE329A'>Message NOT Sent. Network Error?<br/><a href='contact.html'>Try Again</a> </font></div><br/>"; 
> 		};
> 
> 
> 
> 
>         var subject = document.getElementById('subject').value;
>         var message = document.getElementById('message').value;
> 
>         var queryString = "?subject=" + subject + "&message=" + message;
>         ajaxRequest.open("GET", "http://localhost/sendmessage.php" + queryString, true);
>  
>         ajaxRequest.timeout = 10000; // time in milliseconds
>  
>         ajaxRequest.send(null);
>    
>        	pinkbox.style.transition="all 1s linear";
>         pinkbox.style.transform="perspective(200px) translateZ(-200px)";
>  
>  
>       pinkbox.className =  "spinclass";
> 
>       
>       
>  }
> 
>       var f = document.getElementById("myForm");
>       f.onsubmit = ajaxFunction;
> 
> 
>     </script>
>   </body>
> </html>


Oops, sorry, the :
	pinkbox.style.transition="all 1s linear";
is just something I was experimenting with, THIS is what it actually was originally:

	pinkbox.style.transition="transform 1s linear";

[toc] | [prev] | [next] | [standalone]

#36860

groovee@cyberdude.com writes:

> On Sunday, 9 June 2019 02:14:47 UTC+5:30, Ben Bacarisse  wrote:
>
>> 
>> I don't know.  If you post a live example, I'll have a look, but I'm
>> more than happy for you not to do that as it will mean I won't feel
>> obliged to look!
>
> OK, I *tried* to sign up to Codepen,

I would not bother with them.  I meant only a live document served from
a real web server.

> .....so I'm just posting my page here:
>
>
> <!DOCTYPE HTML>
<etc>

Well, that's better than nothin...  Now you need to say what the problem
is.  Your original question was about a rule being crossed out but I
don't see that when I view the page so I can't even address that
question.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#36863

On Monday, 10 June 2019 18:56:43 UTC+5:30, Ben Bacarisse  wrote:

> 
> Well, that's better than nothin...  Now you need to say what the problem
> is.  

When the "Send" button is clicked, I want "pinkbox" to go off into the distance and THEN start spinning. Then, when the message has actually been sent, it will show a "Message Sent" message. It's the FORMER which is not happening, ie. it simply starts spinning without going off into the distance FIRST :(

[toc] | [prev] | [next] | [standalone]

#36865

groovee@cyberdude.com writes:

> On Monday, 10 June 2019 18:56:43 UTC+5:30, Ben Bacarisse  wrote:
>
>> 
>> Well, that's better than nothin...  Now you need to say what the problem
>> is.  
>
> When the "Send" button is clicked, I want "pinkbox" to go off into the
> distance and THEN start spinning. Then, when the message has actually
> been sent, it will show a "Message Sent" message. It's the FORMER
> which is not happening, ie. it simply starts spinning without going
> off into the distance FIRST :(

That's because transformations don't accumulate.  When the spinning
starts, the perspective and translateZ transforms are lost.  You could
add them back in the @keyframes rule.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#36866

On Tuesday, 11 June 2019 16:48:35 UTC+5:30, Ben Bacarisse  wrote:

> You could
> add them back in the @keyframes rule.

Er - how, please? I'm not adept at the "@keyframes" syntax, matter of fact this is the first time I'm coding it.

Phew! Thank God! - I thought *I* was doing something wrong... Thanks, man! :)

[toc] | [prev] | [next] | [standalone]

#36867

groovee@cyberdude.com writes:

> On Tuesday, 11 June 2019 16:48:35 UTC+5:30, Ben Bacarisse  wrote:
>
>> You could
>> add them back in the @keyframes rule.
>
> Er - how, please? I'm not adept at the "@keyframes" syntax, matter of
> fact this is the first time I'm coding it.

For the moment just copy the perspective(...) and translateZ(...) values
you want and paste them into the two arm of the @keyframes rules
alongside the two rotations.

> Phew! Thank God! - I thought *I* was doing something wrong... Thanks,
> man! :)

What do you mean?  For me, writing code that doesn't work is a clear
case of my doing something wrong.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#36871

On Thursday, 13 June 2019 00:46:03 UTC+5:30, Ben Bacarisse  wrote:

> For the moment just copy the perspective(...) and translateZ(...) values
> you want and paste them into the two arm of the @keyframes rules
> alongside the two rotations.

I did this, still Not Working! :

@keyframes spinit {
  from {
	transform: perspective(200px);
	transform: translateZ(-200px);
    transform: rotate3d(1,0,0,0deg);
  }
  to {
	transform: perspective(200px);
	transform: translateZ(-200px);
    transform: rotate3d(1,0,0,360deg);
  }
}


and then:

blah blah
        ajaxRequest.send(null);
   
	pinkbox.style.transitionTimingFunction = "linear"; 
        pinkbox.style.transform="perspective(200px) translateZ(-200px)";
 
 
      pinkbox.className =  "spinclass";





> 
> > Phew! Thank God! - I thought *I* was doing something wrong... Thanks,
> > man! :)
> 
> What do you mean?  For me, writing code that doesn't work is a clear
> case of my doing something wrong.

Well - that's just the way the browser works, right? There's no RULE set in stone that transformations SHOULDN'T accumulate....?

[toc] | [prev] | [next] | [standalone]

#36884

groovee@cyberdude.com wrote on 13 Jun 2019 in comp.lang.javascript:

>> > Phew! Thank God! - I thought *I* was doing something wrong... Thanks,
>> > man! :)
>> 
>> What do you mean?  For me, writing code that doesn't work is a clear
>> case of my doing something wrong.
> 
> Well - that's just the way the browser works, right? There's no RULE set
> in stone that transformations SHOULDN'T accumulate....? 

Like in the real world, come to grips with what really happens,
rules just being the best approximative model to understand how,
and you should test/debug if it applies to your specific case.

That's why you idealy should test your code in all browsers on all operating 
systems used by all users.

So if it does not work, you ARE doing something wrong. If you think that is 
bad of you, that would bu just remnants of your childhood indoctrination.

Thanking a male god, as you seem to do, hinds to that.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web