动画幻灯片_简单的界面，但实现了非常灵活而强大的幻灯片动画

动画幻灯片

Vue向上滑动向下组件 (vue-slide-up-down-component)

It is a simple interface but realizes very flexible and powerful slide animation, for Vue!

它是一个简单的界面，但是对于Vue，可以实现非常灵活和强大的幻灯片动画。

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

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

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm i vue-slide-up-down-component

Usage with Webpack or other module bundlers:

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

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

Vue.component('vue-slide-up-down', VueSlideUpDown)

用法 (Usage)

The component takes three 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>

翻译自: https://vuejsexamples.com/a-simple-interface-but-realizes-very-flexible-and-powerful-slide-animation/

动画幻灯片