数据库变化前端响应_响应数据变化而过渡元素高度

数据库变化前端响应

Vue平滑高度(VSM) (Vue Smooth Height (VSM))

A Vue mixin that answers the question, "How do I transition height: auto?"

Vue mixin回答了以下问题：“如何转换高度：自动？”

When the component's data is changed (i.e. when the updated lifecycle hook is called), its current height will smoothly transition to the new height, instead of instantly resizing. If the transition is interrupted, it will transition from the interrupted height to the new height.

当更改组件的数据时(即，调用更新的生命周期挂钩时)，其当前高度将平滑过渡到新高度，而不是立即调整大小。 如果转换被中断，它将从中断的高度转换到新的高度。

Note that this library has no overlap with Vue's built in transition components.

请注意，该库与Vue的内置过渡组件没有重叠。

View demo 查看演示 Download Source 下载源

安装 (Installation)

Download via npm:

通过npm下载：

$ npm install vue-smooth-height

Include via cdn:

通过CDN包含：

<script src="https://unpkg.com/vue-smooth-height"></script>

用法 (Usage)

Module:

模块：

<template>
    <div>
        <div ref="container"></div>
    </div>
</template>

<script>
import smoothHeight from 'vue-smooth-height';

export default {
    mixins:[smoothHeight],
    mounted(){
        this.$smoothElement({
            el: this.$refs.container,
        })
    },
}
</script>

Browser:

浏览器：

The mixin is available via the global variable SmoothHeight

可通过全局变量SmoothHeight使用mixin

Vue.component('myComponent', {
    mixins:[SmoothHeight],
    mounted(){
        this.$smoothElement({
            el: this.$refs.container,
        })
    },
     template: 
        `
        <div>
            <div ref="container"></div>
        </div>
        `
})

CSS过渡 (CSS Transitions)

VSM will check if the element has a height transition, either through the stylesheet or inline styles. If it exists, VSM will use that. If it doesn't, it will apply transition: height .5s to the element's inline style, and append any existing transition properties it finds.

VSM将通过样式表或嵌入式样式检查元素是否具有高度过渡。 如果存在，VSM将使用它。 如果没有，它将对元素的内联样式应用transition: height .5s ，并附加找到的所有现有过渡属性。

For example, if the element has this style:

例如，如果元素具有以下样式：

.element {
    transition: opacity 1s;
}

VSM will set style="transition: opacity 1s, height .5s;" on the element during the transition. After the transition, it will remove the inline style.

VSM将设置style="transition: opacity 1s, height .5s;" 在过渡期间的元素上。 过渡后，它将删除内联样式。

For compatibility, do not set your other transitions on the element as inline styles, as they will be overridden.

为了兼容性，请勿将元素上的其他过渡设置为嵌入式样式，因为它们将被覆盖。

API (API)

$ smoothElement(选项) ($smoothElement(options))

选项：对象| 数组 (options: Object | Array)

Can be a single options object, or an array of options objects.

可以是单个选项对象，也可以是选项对象数组。

Enables smooth height transition on an element.

在元素上启用平滑的高度过渡。

Option	Types	Default	Description
el	Element, String	null	Required. A reference to the element, or a selector string. Use a selector string if the element is not rendered initially. If the selector string is a class, the first query match will be used.
transition	String	height .5s	The CSS shorthand transition property. Use this option if you don't want to use stylesheets (<style>...</style>).
hideOverflow	Boolean	false	If the element has overflow-y: auto, a scrollbar can temporarily appear during the transition. Set this option to true to hide the scrollbar during the transition.
debug	Boolean	false	Logs messages at certain times within the transition lifecycle.

选项	种类	默认	描述
埃尔	元素，字符串	空值	需要。 对元素的引用或选择器字符串。 如果该元素最初未呈现，请使用选择器字符串。 如果选择器字符串是一个类，则将使用第一个查询匹配项。
过渡	串	height .5s	CSS缩写transition属性。 如果您不想使用样式表( <style>...</style> )，请使用此选项。
hideOverflow	布尔型	假	如果元素具有overflow-y: auto ，则在过渡期间可以临时出现滚动条。 将此选项设置为true可在过渡期间隐藏滚动条。
调试	布尔型	假	在过渡生命周期中的特定时间记录消息。

$ unsmoothElement(选项) ($unsmoothElement(options))

选项：对象| 数组 (options: Object | Array)

Can be a single options object, or an array of options objects.

可以是单个选项对象，也可以是选项对象数组。

Disables smooth height behavior on an element. Registered elements that have the same el as the passed in options will be unregistered.

禁用元素上的平滑高度行为。 与传递的选项具有相同el已注册元素将被取消注册。

例子： (Examples:)

mounted(){
    // Register with element reference
    this.$smoothElement({
        el: this.$refs.container,
    })
    // Register with classname
    this.$smoothElement({
        el: '.container',
    })
    // Pass an array of options
    this.$smoothElement([
        {
            el: this.$refs.container,
        },
        {
            el: '.container',
            hideOverflow: true,
            transition: 'height 1s ease-in-out .15s'
            debug: true,
        }
    ])
    // If the element reference is a component, 
    // make sure to pass in its "$el" property.
    this.$smoothElement({
        el: this.$refs.container.$el,
    })

},

翻译自: https://vuejsexamples.com/transition-an-elements-height-in-response-to-data-changes/

数据库变化前端响应