mardi 28 juin 2016

ember client liquid fire transitions

I have gotten my transitions.js working. Am using the 'fly-to' effect.

However, in tablet mode (so when my browser is smaller/shrunk) I'd like the animation/transition to be the slide one.

This is because the shape, size and position of my div changes in desktop and tablet mode. Using 'fly-to' in my tablet mode results in a clunky animation. But if I change it too 'slide-to' the animation is smooth in tablet mode. ...but then this means in desktop mode, the animation is also 'slide-to'. I need to to be 'fly-to'

Hope that makes sense!

Is there an equivalent of and if/else condition statement I can add to transitions.js ?

See snippet from my transitions.js below:

  let duration = 200;
  this.transition(
    // this.debug(),

    this.use('explode', {
      matchBy: 'data-icon',
      use: ['fly-to', { duration }]
    }, {
      use: ['toDown', { duration }]
    }),
    this.reverse('explode', {
      matchBy: 'data-icon',
      use: ['fly-to', { duration }]
    }, {
      use: ['toUp', { duration }]
    }),
  );




Aucun commentaire:

Enregistrer un commentaire