Registry / web-framework / vue-smooth-reflow

vue-smooth-reflow

library0.1.12jsnpmunverified

Vue Smooth Reflow (VSR) is a Vue 2 mixin designed to provide smooth CSS transitions for elements undergoing reflow, specifically targeting changes in `height: auto`, `width: auto`, and element repositioning via `transform` (specifically `translate()`). It allows developers to register specific CSS properties to transition smoothly when a component's data changes, without conflicting with Vue's built-in `<transition>` components. The current stable version is 0.1.12. The project has not seen active development since late 2020, making it primarily suitable for existing Vue 2 applications and not actively maintained for Vue 3 or newer ecosystems. Its key differentiator is the direct handling of reflow transitions for dynamic content sizes and positions, rather than managing entrance/exit transitions like Vue's native solution.

web-framework

npm install vue-smooth-reflow

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SMOOTH-REFLOW

vue-smooth-reflow

web-frameworkjavascriptv0.1.12

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

smoothReflow

✓ import smoothReflow from 'vue-smooth-reflow'

✗ const smoothReflow = require('vue-smooth-reflow')

This is the primary way to import the mixin for module bundlers. The CommonJS 'require' style is generally incorrect for modern Vue setups or TypeScript.

SmoothReflow (global)

✓ <script src="https://unpkg.com/vue-smooth-reflow"></script> // Available as global variable `SmoothReflow`

✗ import { SmoothReflow } from 'vue-smooth-reflow'

For browser-only usage via CDN, the mixin is exposed globally as `SmoothReflow`. Do not attempt to import it as a named export from the module.

Mixin usage

✓ export default { mixins: [smoothReflow], mounted() { this.$smoothReflow() } }

✗ export default { data() { return { $smoothReflow: null } } }

The `$smoothReflow` method is added to the component instance via the mixin and should not be declared as a data property or regular method.

This quickstart demonstrates how to use `vue-smooth-reflow` to smoothly transition the height and width of a container element when its internal content changes, triggered by a button click. It highlights the mixin's integration and `this.$smoothReflow()` API call with custom properties.

<template> <div ref="myReflowElement" class="container"> <p>Dynamic Content:</p> <div v-for="item in items" :key="item.id" class="item">{{ item.text }}</div> <button @click="toggleContent">Toggle Content</button> </div> </template> <script lang="ts"> import Vue from 'vue'; import smoothReflow from 'vue-smooth-reflow'; export default Vue.extend({ mixins: [smoothReflow], data() { return { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' } ], showMore: false }; }, mounted() { // Initialize smooth reflow on the root element of this component // or a specific element via a ref or selector. (this as any).$smoothReflow({ el: this.$refs.myReflowElement as HTMLElement, property: ['height', 'width'], transition: 'height .3s ease-in-out, width .3s ease-in-out' }); }, methods: { toggleContent() { if (this.showMore) { this.items = [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' } ]; } else { this.items = [ { id: 1, text: 'This is a longer item 1 that expands the width and height.' }, { id: 2, text: 'Item 2 with more content.' }, { id: 3, text: 'Another item added dynamically.' } ]; } this.showMore = !this.showMore; } } }); </script> <style> .container { border: 1px solid #ccc; padding: 10px; margin: 20px; background-color: #f9f9f9; overflow: hidden; /* Important for height transitions */ } .item { padding: 5px 0; white-space: normal; } </style>

Debug

Known issues

breakingVue Smooth Reflow is designed exclusively for Vue 2 applications and is not compatible with Vue 3 or later versions. Attempts to use it in a Vue 3 project will likely result in errors due to fundamental API changes.

fix

For Vue 3, consider using built-in transition capabilities (e.g., `<Transition>`) or modern CSS techniques like `grid-template-rows` transitions, or a dedicated Vue 3 compatible library for similar effects.

affects: >=0.1.0

gotchaAny CSS `transition` properties defined as inline styles directly on the 'smooth element' (the element targeted by `$smoothReflow`) will be ignored and erased by the library. This behavior is by design to prevent conflicts with VSR's own transition management.

fix

Define transitions for other properties via CSS classes or `<style>` blocks, ensuring they are not applied directly as inline `style` attributes on the targeted element.

affects: >=0.1.0

gotchaThe library only supports transitioning a limited set of CSS properties: `height`, `width`, and `transform`. For `transform`, it specifically transitions the `translate()` function. Other CSS properties will not be smoothly reflowed by this mixin.

fix

Ensure your reflow requirements are limited to these specific properties. For other properties, combine VSR with standard CSS transitions or Vue's `<transition>` components on separate elements.

affects: >=0.1.0

deprecatedThe `vue-smooth-reflow` package has not been actively maintained since September 2020. This means it will not receive updates for new Vue versions, bug fixes, or security patches, potentially leading to compatibility issues or unaddressed vulnerabilities.

fix

For new projects or existing projects considering upgrading Vue, it's highly recommended to seek alternative, actively maintained solutions that support Vue 3+.

affects: >=0.1.0

Errors

Common errors & fixes

Property or method '$smoothReflow' is not available on the instance but referenced during render.

The `smoothReflow` mixin has not been correctly included in the component's `mixins` array.

fix

Ensure that `import smoothReflow from 'vue-smooth-reflow'` is present and that `mixins: [smoothReflow]` is added to your component's options.

TypeError: Cannot read properties of undefined (reading '$smoothReflow')

Attempting to call `$smoothReflow()` before the component is mounted, or outside of a component context where the mixin is applied.

fix

Call `$smoothReflow()` within the `mounted()` lifecycle hook of your Vue component, or after ensuring the mixin is properly initialized.

Element's height/width jumps instead of smoothly transitioning.

The `$smoothReflow()` method was not called on the target element, or the `property` option did not include `height` or `width`, or `overflow: hidden` is missing on the element.

fix

Verify that `this.$smoothReflow()` is called, the `property` option correctly lists 'height' and/or 'width', and the target element (or its parent) has `overflow: hidden` in its CSS.

Error: Failed to mount app: mountComponent must receive a VNode. (Vue 3 related errors)

Attempting to use `vue-smooth-reflow` in a Vue 3 project, for which it is incompatible.

fix

This library is Vue 2 only. For Vue 3, consider native CSS transitions, `grid-template-rows` animation, or a Vue 3 compatible alternative.

Upgrade

Version history

0.1.12latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue.js framework, specifically targeting Vue 2.x versions.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/guanzo/vue-smooth-reflow ↗

packagehttps://www.npmjs.com/package/vue-smooth-reflow ↗