SCSS Transitions vereinfachen

Ihr nutzt sicherlich auch in euren Projekten CSS-Transitions, um das Ändern eurer Properties zu animieren, oder? Wie macht ihr das? Setzt ihr jedes Mal individuell ein transition? Darauf hatte ich nämlich eine Lust mehr und habe mir hierfür ein SCSS Mixin geschrieben. Das würde ich euch gerne in diesem Blog-Beitrag vorstellen.

Das SCSS-Transition Mixin

Installieren

Ihr könnt euch das das Mixin ganz einfach als npm Paket installieren:

$ npm install --save-dev transition-mixin

oder ihr clont das Github-Repo: https://github.com/NikFlip/transition-mixin

Anschließend müsst ihr nur noch das Mixin per @import in eurer SCSS-Datei importieren:

/* example.scss */

@import 'pfad/zum/transition-mixin';

Das wäre geschafft. Das Mixin könnt ihr nun folgend benutzen:

.my-selector {
    @include transition-mixin();
}

Nutzt ihr das Mixin, ohne Werte hereinzureichen (siehe Beispiel oben). So wird ein transition: all ausgegeben. Ihr könnt jedoch auch bestimmen, welchen Properties animiert werden soll:

.my-selector {
    @include transition-mixin('border-color', 'box-shadow', 'background-size');
}

Das wird dann so ausgegeben:

.my-selector {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-size 0.25s ease;
}

Transitions individualisieren

Darüherhinaus könnt ihr auch genaustens bestimmen, wie eure Transitions aussehen sollen. Dazu könnt ihr eine map() als Parameter in das Mixin reichen. Das schaut dann in etwa so aus:

$my-special-transition: (
    property: background-size,
    timing-function: cubic-bezier(0.44,-0.55, 0.24, 2.7)
);

@include transition-mixin($my-special-transition);

Die default-map schaut übrigens so aus:

$map: (
    duration: .25s,
    delay: false, //use something like .25s
    property: background-size,
    timing-function: ease-in,
)

Eine ausführliche Dokumentation samt Tests findet ihr im Github-Repo: transition-mixin.

Auf geht's! Viel Spaß mit dem Mixin.