how is that transition of the icons when choosing dark/light/auto mode?

[fcno]

Initially I would like to congratulate you for the work that was very well done and for the recent integration to the Laravel framework.

I'd also like to congratulate you on the most beautiful transition I've ever seen for switching the light/dark/auto mode icons.

So, without any kind of shame, I would like to ask you to explain (if possible with many words - or maybe in a video coff coff) how the transition was made with the rotations that simulate, beautifully, the sun hiding and rising.

Note: I'm asking because I wasn't able to fully understand it by looking at the source code.

thx :)

[WalterWoshid]

@fcno

I created a small codepen: https://codepen.io/walterwoshid/pen/yLpNxjW

I used Vue 2 and Tailwind CSS 2, I hope you are a little bit familiar with it.

Explanation - Vue:

Vue has a virtual dom, that means, every variable in the data object of the new Vue({}) object is synced with the html. I change a number, it automatically changes in the html. I can include it with {{ variable }} or :class="variable"

Explanation - HTML:

• :class="{ class: condition } - This is a list with conditional classes. If the condition is true, the class is added to the class attribute, see bg-gray-800 & bg-gray-100
• @click="method" - This executes a method in the methods object of the new Vue({}) object
• Utility classes like p-3 or bg-gray-100 come from Tailwind CSS

Explanation - Animation:

• First of all I created a relative box (icon-box) and placed 2 icons inside
• These icons can be on top of each other with the absolute attribute
• The :class attribute is a list, it will render each item in this list as a class
• After I click this button there is happening a sequence:
  • Clear all previous timeouts
  • Change the text and the dark mode
  • Add the 'animate-out' class to the icon that should disappear
    • The animate-out has a 750ms animation which executes the rotate-out keyframe
    • The keyframe has a flow from 0 - 100% and when its done, it should disappear
    • The flow changes the opacity, the rotation from itself and the position. This combination gives it such a 90 degree rotation
  • Add the animate-in class a little bit later
    • Does almost the same thing like animate-out, but some values are slightly changed
  • After every animation is done, I remove the classes from the list

The animation is a little bit buggy if you click the button often, not like in Ignition, but with these principles, it is possible to perfect it :)

[fcno]

Hey @WalterWoshid

Thx for your full explanation with a codepen.

I'm not familiar with Vue, but Im with Tailwind and Alpinejs. I think I can replicate it.

:)