ow

WebVue/src/views/test/wow.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="page">
+        <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">
+            <img :src="item.pngurl" mode="widthFix"></img>
+        </section>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { bsInfo } from "@/utils/browser";
+import WOW from "wow.js";
+
+const item = ref({
+    pngurl: "http://localhost:5235/FileServer/Scale/DmsFile/SYSTEM/JPG/bd405061-a12c-4c41-b55c-f61aa8eebd89-3-3.JPG",
+    animateClass: "slideInLeft",
+    iteration: 2,
+    duration: 3000,
+});
+
+onMounted(() => {
+    var wow = new WOW({
+        boxClass: "wow", // animated element css class (default is wow)
+        animateClass: "animated", // animation css class (default is animated)
+        offset: 0, // distance to the element when triggering the animation (default is 0)
+        mobile: true, // trigger animations on mobile devices (default is true)
+        live: true, // act on asynchronously loaded content (default is true)
+        scrollContainer: null, // optional scroll container selector, otherwise use window,
+        resetAnimation: true, // reset animation on end (default is true)
+    });
+    wow.init();
+});
+</script>
+<style scoped>
+.page {
+    overflow-x: hidden;
+}
+
+.swiper-item-png {
+    overflow: hidden;
+}
+</style>