Svelte Class Transition
:fireworks: A very simple Svelte 3 component that allows you to do transitions using CSS classes
Overview
The Svelte-class-transition is a simple component for Svelte 3 that allows transitions using CSS classes. It provides an easy way to animate elements based on toggle states, with customizable transition properties.
Features
- Toggle Type: Allows for setting the toggle property as a boolean to control visibility of the slot.
- In State: Defines the initial state of the slot when toggle is set to true.
- On State: Specifies the state that the slot transitions to when toggle is set to true.
- Out State: Determines the state that the slot transitions to when toggle is set to false.
- In Transition: Defines the transition properties for the slot when toggle is initially set to true.
- Out Transition: Specifies the transition properties for the slot when toggle is set to false.
- Transitions: Provides a way to group common classes from the inTransition and outTransition properties.
Summary
Svelte-class-transition is a lightweight Svelte 3 component that allows for easy transitions using CSS classes. It provides various props to customize the animation properties and control the visibility of the slot. With its simple installation process, it can be easily integrated into Svelte projects to add smooth transitions to elements.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.