lightgallery 2.3.0-beta.2 → 2.4.0-beta.0

package/scss/_lg-theme-default.scss

@@ -219,16 +219,23 @@
 body:not(.lg-from-hash) {
     .lg-outer {
         &.lg-start-zoom {
-            .lg-object {
-                opacity: 0;
-                will-change: opacity;
-                @include transitionCustom(
-                    opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important
-                );
-            }
-            .lg-item.lg-complete {
-                .lg-object {
-                    opacity: 1;
+            .lg-item:not(.lg-zoomable) {
+                .lg-img-wrap,
+                .lg-video-cont {
+                    opacity: 0;
+                    @include transform(scale3d(0.5, 0.5, 0.5));
+                    will-change: transform, opacity;
+                    @include transitionCustom(
+                        transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s,
+                        opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important
+                    );
+                }
+                &.lg-complete {
+                    .lg-img-wrap,
+                    .lg-video-cont {
+                        opacity: 1;
+                        @include transform(scale3d(1, 1, 1));
+                    }
                 }
             }
         }

package/scss/lightgallery-core.scss

@@ -158,7 +158,6 @@
             background: url('#{$lg-path-images}/loading.gif') no-repeat scroll
                 center center transparent;
         }
-        will-change: transform, opacity;
         display: none !important;
     }
     &.lg-css3 {
@@ -221,30 +220,6 @@
         position: relative;
     }
 
-    &.lg-show-after-load {
-        .lg-item {
-            .lg-object,
-            .lg-video-play-button {
-                opacity: 0;
-                will-change: opacity;
-                @include transition(opacity 0.15s ease 0s);
-            }
-            &.lg-zoom-from-image {
-                .lg-object,
-                .lg-video-play-button {
-                    opacity: 1;
-                }
-            }
-
-            &.lg-complete {
-                .lg-object,
-                .lg-video-play-button {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-
     // Hide title div if empty
     .lg-empty-html {
         &.lg-sub-html,

package/vue/LightGallery.vue.d.ts

@@ -1,7 +1,7 @@
 import { Vue } from 'vue-class-component';
 import { LightGallery as LGPlugin } from '../lightgallery';
 import { LightGallerySettings } from '../lg-settings';
-import { AfterAppendSubHtmlDetail, AfterCloseDetail, AfterOpenDetail, AfterSlideDetail, BeforeCloseDetail, BeforeNextSlideDetail, BeforeOpenDetail, BeforePrevSlideDetail, BeforeSlideDetail, ContainerResizeDetail, DragEndDetail, DragMoveDetail, DragStartDetail, InitDetail, PosterClickDetail, SlideItemLoadDetail } from '../lg-events';
+import { AfterAppendSubHtmlDetail, AfterCloseDetail, RotateLeftDetail, RotateRightDetail, FlipHorizontalDetail, FlipVerticalDetail, AfterOpenDetail, AfterSlideDetail, BeforeCloseDetail, BeforeNextSlideDetail, BeforeOpenDetail, BeforePrevSlideDetail, BeforeSlideDetail, ContainerResizeDetail, DragEndDetail, DragMoveDetail, DragStartDetail, InitDetail, PosterClickDetail, SlideItemLoadDetail } from '../lg-events';
 export default class Lightgallery extends Vue {
     $refs: {
         container: HTMLElement;
@@ -25,6 +25,10 @@ export default class Lightgallery extends Vue {
     onBeforePrevSlide: (detail: BeforePrevSlideDetail) => void;
     onBeforeClose: (detail: BeforeCloseDetail) => void;
     onAfterClose: (detail: AfterCloseDetail) => void;
+    onRotateLeft?: (detail: RotateLeftDetail) => void;
+    onRotateRight?: (detail: RotateRightDetail) => void;
+    onFlipHorizontal?: (detail: FlipHorizontalDetail) => void;
+    onFlipVertical?: (detail: FlipVerticalDetail) => void;
     LG: LGPlugin;
     mounted(): void;
     unmounted(): void;