Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Ручные стили и анимации #126

Closed
Diokuz opened this Issue · 5 comments

2 participants

@Diokuz
.ani {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    -ms-transition: all .3s linear;
    animation: last 3s infinite;
    }

@keyframes last {
    from {
        transform: translate3d(0, 0, 0)
    }
    to {
        transform: translate3d(0, 100px, 0)
    }
}

Превращается в

.ani {
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  -webkit-animation: last 3s infinite;
  animation: last 3s infinite;
}

@-webkit-keyframes last {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

@keyframes last {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 100px, 0);
    -ms-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

Более логично:

.ani {
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  -moz-transition: all .3s linear;
  -webkit-animation: last 3s infinite;
  animation: last 3s infinite;
}

@-webkit-keyframes last {
  from {
    -webkit-transform: translate3d(0, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 100px, 0);
  }
}

@keyframes last {
  from {
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    -ms-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
}

То есть я хочу при желании вручную указывать те или иные префиксы, например для лисы я хочу больше транзишн. Браузера который поддерживает transform но не поддерживает keyframes (или наоборот) без префикса вебкит не существует, и даже если появится - дублировать свойства нет смысла. Вебкиту вебкитово) Этот код хочется выпилить.

@ai
Owner
ai commented

Проблема в том, что Автопрефиксер удалил -ms-transition (только из отпуска, всё сильно навалило :) )?

Я могу сделать примерно такое API: если -ms-transition идёт сразу после transition, то Автопрефиксер будет понимать, что это хак для браузера и не выпиливать.

@Diokuz

если он идёт после, то это именно хак)

@Diokuz

Более того, такие хаки приходится постоянно использовать для всех браузеров для многих свойств.

@ai
Owner
ai commented

Всё, версия 1.0 теперь не удаляет префикс, если он переопределён после свойства без префикса: тест

@ai ai closed this
@ai ai reopened this
@ai ai closed this
@ai
Owner
ai commented

Released today in 1.0 version. :christmas_tree: :santa:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.