Clean transition system and enhance perfs

.csscomb.json

@@ -214,6 +214,7 @@
  "animation-delay",
  "animation-iteration-count",
  "animation-direction",
+ "will-change",
  "pointer-events",
  "unicode-bidi",
  "direction",

dist/tingle.css

@@ -22,14 +22,13 @@
  align-items: center;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
- background: rgba(0, 0, 0, .8);
+ background: rgba(0, 0, 0, .85);
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
- transition: transform .2s ease;
 }
 
 /* confirm and alerts
@@ -87,9 +86,7 @@
  background: #fff;
  opacity: 1;
  cursor: auto;
- transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
- -ms-transform: scale(.8);
- transform: scale(.8);
+ will-change: transform, opacity;
 }
 
 .tingle-modal-box__content {
@@ -143,8 +140,7 @@
 }
 
 .tingle-modal--visible .tingle-modal-box {
- -ms-transform: scale(1);
- transform: scale(1);
+ animation: scale .2s cubic-bezier(.68, -.55, .265, 1.55) forwards;
 }
 
 .tingle-modal--overflow {
@@ -273,3 +269,17 @@
  filter: none;
  }
 }
+
+/* animations
+-------------------------------------------------------------- */
+
+@keyframes scale {
+ 0% {
+ opacity: 0;
+ transform: scale(.9);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}

dist/tingle.js

@@ -20,7 +20,6 @@
  /* == modal */
  /* ----------------------------------------------------------- */
 
- var transitionEvent = whichTransitionEvent()
  var isBusy = false
 
  function Modal(options) {
@@ -120,23 +119,13 @@
  // show modal
  this.modal.classList.add('tingle-modal--visible')
 
- if (transitionEvent) {
- this.modal.addEventListener(transitionEvent, function handler() {
- if (typeof self.opts.onOpen === 'function') {
- self.opts.onOpen.call(self)
- }
-
- // detach event after transition end (so it doesn't fire multiple onOpen)
- self.modal.removeEventListener(transitionEvent, handler, false)
- self._busy(false)
- }, false)
- } else {
- if (typeof self.opts.onOpen === 'function') {
- self.opts.onOpen.call(self)
- }
- self._busy(false)
+ // onOpen callback
+ if (typeof self.opts.onOpen === 'function') {
+ self.opts.onOpen.call(self)
  }
 
+ self._busy(false)
+
  // check if modal is bigger than screen height
  this.checkOverflow()
 
@@ -164,39 +153,18 @@
  this.modal.classList.remove('tingle-modal--visible')
 
  // using similar setup as onOpen
- // reference to the Modal that's created
  var self = this
 
- if (force) {
- self.modal.style.display = 'none'
- if (typeof self.opts.onClose === 'function') {
- self.opts.onClose.call(this)
- }
- self._busy(false)
- } else if (transitionEvent) {
- // track when transition is happening then run onClose on complete
- this.modal.addEventListener(transitionEvent, function handler() {
- // detach event after transition end (so it doesn't fire multiple onClose)
- self.modal.removeEventListener(transitionEvent, handler, false)
-
- self.modal.style.display = 'none'
-
- // on close callback
- if (typeof self.opts.onClose === 'function') {
- self.opts.onClose.call(this)
- }
+ self.modal.style.display = 'none'
 
- self._busy(false)
-
- }, false)
- } else {
- self.modal.style.display = 'none'
- // on close callback
- if (typeof self.opts.onClose === 'function') {
- self.opts.onClose.call(this)
- }
- self._busy(false)
+ // onClose callback
+ if (typeof self.opts.onClose === 'function') {
+ self.opts.onClose.call(this)
  }
+
+ // release modal
+ self._busy(false)
+
  }
 
  Modal.prototype.setContent = function(content) {
@@ -446,18 +414,6 @@
  document.removeEventListener('keydown', this._events.keyboardNav)
  }
 
- /* ----------------------------------------------------------- */
- /* == confirm */
- /* ----------------------------------------------------------- */
-
- // coming soon
-
- /* ----------------------------------------------------------- */
- /* == alert */
- /* ----------------------------------------------------------- */
-
- // coming soon
-
  /* ----------------------------------------------------------- */
  /* == helpers */
  /* ----------------------------------------------------------- */
@@ -473,23 +429,6 @@
  return arguments[0]
  }
 
- function whichTransitionEvent() {
- var t
- var el = document.createElement('tingle-test-transition')
- var transitions = {
- 'transition': 'transitionend',
- 'OTransition': 'oTransitionEnd',
- 'MozTransition': 'transitionend',
- 'WebkitTransition': 'webkitTransitionEnd'
- }
-
- for (t in transitions) {
- if (el.style[t] !== undefined) {
- return transitions[t]
- }
- }
- }
-
  /* ----------------------------------------------------------- */
  /* == return */
  /* ----------------------------------------------------------- */