# Varianten .js--overlay transition deaktivieren

**URL:** <https://forum.shopware.com/t/varianten-js-overlay-transition-deaktivieren/33717>\
**Category:** Administration\
**Created:** [19. Januar 2016 um 09:19 UTC](https://forum.shopware.com/t/varianten-js-overlay-transition-deaktivieren/33717 "2016-01-19T09:19:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![indigo](https://avatars.discourse-cdn.com/v4/letter/i/dec6dc/32.png) [@indigo](https://forum.shopware.com/u/indigo)\
**Post date:** [19. Januar 2016 um 09:19 UTC](https://forum.shopware.com/t/varianten-js-overlay-transition-deaktivieren/33717/1 "2016-01-19T09:19:47Z")

</div>

Hallo, Ich habe festgestellt, dass dieses ganze Varianten Wechsel Overlay Gedöns die Geschwindigkeit des Variantenwechsel im Frontend ausbremst. Die Transition Funktion habe ich erst einmal per CSS “unterbunden”. Die Animation ist dadurch NUR erst einmal nicht mehr sichtbar. Aber subjektiv schneller. Das Problem mit “js–overlay is–open” und dem style transition vom js–loading-indicator bleibt aber. Wie kann ich das komplette transition abschalten?

---

<div class="post-metadata">

**Author:** ![StageIsYours](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@StageIsYours](https://forum.shopware.com/u/StageIsYours)\
**Post date:** [12. Juli 2017 um 16:46 UTC](https://forum.shopware.com/t/varianten-js-overlay-transition-deaktivieren/33717/2 "2017-07-12T16:46:03Z")

</div>

Hast du schon eine Lösung gefunden? Bzw. wie genau hast du die Funktion per CSS unterbunden?

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![indigo](https://avatars.discourse-cdn.com/v4/letter/i/dec6dc/32.png) [@indigo](https://forum.shopware.com/u/indigo)\
**Post date:** [20. Juli 2017 um 06:34 UTC](https://forum.shopware.com/t/varianten-js-overlay-transition-deaktivieren/33717/3 "2017-07-20T06:34:04Z")

</div>

&nbsp;Ist sichher eher mit der Brechstange - aber es funktioniert.

```
.js--loading-indicator, .js--overlay {
	-webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-tap-highlight-color: none;
    -moz-tap-highlight-color: none;
    tap-highlight-color: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: none;
    background: none;
    visibility: hidden;
}

```

&nbsp;