vue slideup

向下滑动 (vue-slide-up-down)

Like jQuery's slideUp / slideDown, but for Vue!

就像jQuery的slideUp / slideDown一样，但是对于Vue！

安装 (Installation)

npm i vue-slide-up-down

Usage with Webpack or other module bundlers:

与Webpack或其他模块捆绑器一起使用：

import VueSlideUpDown from 'vue-slide-up-down'
// or
const VueSlideUpDown = require('vue-slide-up-down')Vue.component('vue-slide-up-down', VueSlideUpDown)

Or use the UMD build directly in your browser:

或直接在浏览器中使用UMD构建：

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-slide-up-down/dist/vue-slide-up-down.umd.js"></script>
<script type="text/javascript">Vue.component('vue-slide-up-down', VueSlideUpDown);
</script>

用法 (Usage)

The component takes two props:

该组件有两个道具：

• active (Boolean): Whether to show the component (true) or not (false)

  active (布尔值)：是否显示组件( true )( false )

• duration (Number): How long the animation is supposed to be, in milliseconds. Defaults to 500.

  duration (数字)：动画应该duration多长时间，以毫秒为单位。 默认为500 。

• tag (String): Which HTML tag to use for the wrapper element. Defaults to div.

  tag (字符串)：用于包装元素HTML标签。 默认为div 。

<div class="MyContent"><h1>Always show this</h1><vue-slide-up-down :active="active" :duration="1000">Only show this if "active” is true</vue-slide-up-down>
</div>

自定义transition-timing-function (Custom transition-timing-function)

If you want to use a different timing function, add some CSS for your <vue-slide-up-down> element. (See demo/index.html for a full example.)

如果要使用其他计时功能，请为<vue-slide-up-down>元素添加一些CSS。 (有关完整示例，请参见demo/index.html 。)

<style>.wobbly-accordeon {transition-timing-function: cubic-bezier(0.195, 1.650, 0.435, -0.600);}
</style><vue-slide-up-down class="wobbly-accordeon">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.
</vue-slide-up-down>

也 (Also)

This currently works by showing the element, measuring the height, setting the height back to 0, and then CSS-transitioning to the target height. This works okay, but is not very performant. If you have other ideas how to make this extremely smooth and good looking, feel free to send issues or pull requests.

当前，这可以通过显示元素，测量高度，将高度设置回0，然后CSS转换为目标高度来实现。 可以 ，但是效果不是很好。 如果您还有其他想法可以使此过程极其平滑和美观，请随时发送问题或提出请求。

翻译自: https://vuejsexamples.com/like-jquerys-slideup-slidedown-but-for-vue/

vue slideup