Animation playing while a form is submitted, part 3

Newsgroups	comp.lang.javascript
Date	2019-06-03 03:25 -0700
Message-ID	<a078d1e7-9622-48df-8207-fa87edfacbc8@googlegroups.com> (permalink)
Subject	Animation playing while a form is submitted, part 3
From	groovee@cyberdude.com

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

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

csiph-web