add animate.css

Author: adenvt

.eslintrc

@@ -44,9 +44,12 @@
         "on": "colon"
       }
     }],
-    "vue/require-default-prop": "warning",
-    "vue/require-prop-types": "warning",
-    "vue/prop-name-casing": ["error", "camelCase"]
+    "vue/require-default-prop": "off",
+    "vue/require-prop-types": "off",
+    "vue/prop-name-casing": ["error", "camelCase"],
+    "unicorn/catch-error-name": ["error", {
+      "name": "err"
+    }]
   },
   "overrides": [{
     "files": ["resources/assets/js/coreui/**/*.vue"],

package-lock.json

@@ -36,6 +36,7 @@
     "stylelint-scss": "^3.1.3"
   },
   "dependencies": {
+    "animate.css": "^3.6.1",
     "axios": "^0.18",
     "bootstrap": "^4.1.1",
     "bootstrap-vue": "^2.0.0-rc.11",

package.json

@@ -11,9 +11,36 @@ window.Vue = require('vue')
 try {
   window.$ = window.jQuery = require('jquery')
 
+  // Animate CSS
+  window.$.fn.extend({
+    animateCss: function (animationName, callback) {
+      const animationEnd = (function (el) {
+        const animations = {
+          animation      : 'animationend',
+          OAnimation     : 'oAnimationEnd',
+          MozAnimation   : 'mozAnimationEnd',
+          WebkitAnimation: 'webkitAnimationEnd',
+        }
+
+        for (const t in animations) {
+          if (el.style[t] !== undefined)
+            return animations[t]
+        }
+      })(document.createElement('div'))
+
+      this.addClass(`animated ${animationName}`).one(animationEnd, function () {
+        $(this).removeClass(`animated ${animationName}`)
+
+        if (typeof callback === 'function') callback()
+      })
+
+      return this
+    },
+  })
+
   require('bootstrap')
-} catch (error) {
-  console.error(error)
+} catch (err) {
+  console.error(err)
 }
 
 /**

resources/assets/js/bootstrap.js

@@ -19,6 +19,7 @@ $simple-line-font-path: '~simple-line-icons/fonts/';
 @import '~font-awesome/css/font-awesome.min.css';
 @import '~simple-line-icons/css/simple-line-icons.css';
 @import '~flag-icon-css/css/flag-icon.min.css';
+@import '~animate.css/animate.min.css';
 
 // Import Other CSS Module