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

Groups > comp.lang.javascript > #37735

Re: Two SUCESSIVE animations on the same element - how?

Newsgroups comp.lang.javascript
Date 2019-11-09 09:10 -0800
References <54ce4120-6481-4ad8-9e1a-2fe545d32705@googlegroups.com> <9f50b978-2995-4691-9252-a714742b41ad@googlegroups.com>
Message-ID <b8fe92c3-1510-403b-8ffd-1e07976fac4e@googlegroups.com> (permalink)
Subject Re: Two SUCESSIVE animations on the same element - how?
From "Michael Haufe (TNO)" <tno@thenewobjective.com>

Show all headers | View raw

On Thursday, November 7, 2019 at 6:46:19 PM UTC-6, Michael Haufe (TNO)
> Your "simplification" doesn't compose classes as the OP asked. Good job incorrecting me, try again.

On Friday, November 8, 2019 at 12:58:06 AM UTC-6, Julio Di Egidio wrote:
>
> I wasn't correcting you, I couldn't care less.
> 
> That said, you are simply incompetent: the job (the developer's job) is not
> to do what the OP is trying to do as he is trying to do it, the job is to
> **implement a requirement**, which in this case was "the box from here to
> there to there, and then how do I keep going without reloading the page??"
>
> [...]
> Are you trying to tell me that you cannot even read or do you actually disagree
that is the requirement?

On Friday, November 8, 2019 at 12:34:13 PM UTC-6, Michael Haufe (TNO) wrote:
>
> Unlike you, I read more than the first paragraph which included important details. Do try to keep up...

On Saturday, November 9, 2019 at 3:44:07 AM UTC-6, Julio Di Egidio wrote:
> 
> Which I take to mean "the latter".  You are totally in denial, the OP has
> even come back to you as well as to Evertroll complaining that you guys
> weren't solving the problem.  But that's just to point out your delusion,
> because I certainly don't need to defend problem vs solution, or requirements
> vs implementations, that's the fucking 101 of the discipline and you simply
> have no clue.

On Saturday, November 9, 2019 at 7:01:53 AM UTC-6, gro...@cyberdude.com wrote:
> Guys, Please Stop Fighting!
> 
> This *particular example* is not the important thing here, but rather the larger question of *how to apply 2 different classes successively*. Julio, thanks for your help, but putting a "50%" in the keyframes is Not what I'm looking for, at all.

QED.

Thank you for restating my reading of it more succinctly than before. 

While this can be accomplished, depending on how you plan to use it, you may need more and more JavaScript to coordinate the application and removal of the required classes and desired positions in which case it may be easier to just use JavaScript directly. 

The pen I put forward is (as Evertjan pointed out) incomplete. It only demonstrates as approach via `animation-fill-mode: forwards`.

Another approach is to use css transitions and have the animating classes assigned to have a higher precedent than the base element:

<https://codepen.io/mlhaufe/pen/NWWzeBJ>

Again, you'll need more JavaScript as this get extended, so perhaps some context on your larger problem would prompt a more appropriate solution. Is your project something like a menu opening or Super Mario jumping?

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

Thread

Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-03 23:17 -0800
  Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-04 13:07 -0800
    Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-06 01:53 -0800
      Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-06 11:47 +0100
        Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-07 09:07 -0800
          Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-08 00:25 +0100
          Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 01:11 +0100
            Re: Two SUCESSIVE animations on the same element - how? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-11 14:19 +0100
      Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-07 11:00 -0800
        Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-07 16:46 -0800
          Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-07 22:57 -0800
            Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-08 04:21 -0800
              Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-08 09:08 -0800
                Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-08 10:34 -0800
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 01:44 -0800
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 02:02 -0800
                Re: Two SUCESSIVE animations on the same element - how? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-11-09 11:55 +0000
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:39 -0800
                Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:32 -0800
  Re: Two SUCESSIVE animations on the same element - how? groovee@cyberdude.com - 2019-11-09 05:01 -0800
    Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 05:45 -0800
      Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-09 09:12 -0800
        Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 13:53 -0800
          Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 00:55 +0100
            Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 19:00 -0800
              Re: Two SUCESSIVE animations on the same element - how? Julio Di Egidio <julio@diegidio.name> - 2019-11-09 21:09 -0800
                Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:10 +0100
                Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:29 +0100
              Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 11:35 +0100
    Re: Two SUCESSIVE animations on the same element - how? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-11-09 09:10 -0800
  Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 00:51 +0100
    Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-10 01:05 +0100
      Re: Two SUCESSIVE animations on the same element - how? Arno Welzel <usenet@arnowelzel.de> - 2019-11-12 12:00 +0100

csiph-web