vue2动画-组件向左滑动后隐藏和向右滑动显示

vue2动画-组件向左滑动后隐藏和向右滑动显示

可以使用 Vue.js 的过渡动画功能来实现组件的隐藏和显示效果。在 Vue.js 2.x 版本中，你可以通过以下步骤来实现：

1.首先，确保你已经安装了 Vue.js 和相关的依赖库。如果没有安装，请先安装并引入 Vue.js。
2.在组件的 template 标签中添加需要隐藏和显示的内容。

<template>
  <div>
    <transition name="slide">
      <div class="animated-component" v-if="showComponent">
        <!-- 这里放置需要隐藏和显示的组件或内容 -->
      </div>
    </transition>
  </div>
</template>

3.在 style 标签中定义过渡效果的 CSS。

<style>
.slide-enter-active {
    
    
  animation: slide-in 0.5s;
}

.slide-leave-active {
    
    
  animation: slide-out 0.5s;
}

@keyframes slide-in {
    
    
  from {
    
    
    transform: translateX(-100%);
  }
  to {
    
    
    transform: translateX(0);
  }
}

@keyframes slide-out {
    
    
  from {
    
    
    transform: translateX(0);
  }
  to {
    
    
    transform: translateX(-100%);
  }
}
</style>

4.在组件的 script 标签中定义 data 属性和 methods 方法。

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      showComponent: false
    };
  },
  methods: {
    
    
    toggleComponent() {
    
    
      this.showComponent = !this.showComponent;
    }
  }
};
</script>

现在，当你调用 toggleComponent 方法时，组件将通过滑动的动画效果进行隐藏和显示。

注意：上面的例子使用了 CSS 动画，你也可以使用 Vue.js 提供的过渡类名（如
fade-enter、fade-enter-active、fade-leave、fade-leave-active）和 CSS 过渡属性（如
transition、animation）来实现其他类型的过渡效果。