使用 vue 向上滑动过渡答案

【问题标题】：Slide up transition with vue使用 vue 向上滑动过渡
【发布时间】：2020-11-03 07:35:34
【问题描述】：

我是 vue 新手，刚刚了解了 vue 转换。我正在尝试向上移动 div 并在单击 div 时扩大其宽度，但我还没有完全掌握过渡的概念。下面是我想要实现的图像和代码。

<template>
  <div class="hello">
    <transition name="slide">
      <div class="meal__status">
        <a @click="toggle = !toggle; move();" class="meal__status-wrap"></a>
      </div>
    </transition>
    <div v-if="toggle" class="overlay"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      toggle: false
    };
  },
  methods: {
    move() {}
  }
};
</script>

<style scoped>
.overlay {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  text-align: center;
  transition: opacity 500ms;
  opacity: 1;
}
.meal__status-wrap {
  background-color: #42b983;
  height: 60px;
  width: 70px;
  display: block;
  position: relative;
  z-index: 99999;
}

</style>

这是代码沙箱https://codesandbox.io/s/awesome-matsumoto-7rlxb?file=/src/components/HelloWorld.vue的链接

这就是我所拥有的

这就是我想要达到的目标

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

过渡仅适用于使用 v-if 或 v-show 显示/隐藏元素时。因为您没有使用v-if 或v-show，所以您不应该尝试使用过渡。

相反，使用@click 处理程序切换元素上的类，然后根据该类设置元素的样式。

<template>
  <div class="hello">
    <div
      class="meal__status"
      :class="{ 'meal__status--active': mealStatusActive }"
      @click="mealStatusActive = !mealStatusActive"
    ></div>
    <div class="overlay"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      mealStatusActive: false
    };
  }
};
</script>

<style scoped>
.meal__status {
  background-color: #42b983;
  height: 60px;
  width: 70px;
  display: block;
  position: relative;
  z-index: 99999;
}
.meal__status--active {
  margin-top: -60px;
  width: 100%;
}
.overlay {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  text-align: center;
  transition: opacity 500ms;
  opacity: 1;
}
</style>

【讨论】：

宽度不增加@BryceHowitson
@AdogaPatricia 不知道我能如何帮助你。我至少得看看更新的代码。
@BryceHowitson 它有效，我的班级名称有误，感谢您的帮助。

【解决方案2】：

Vue 转换在Vue states or routes 之间工作（想想页面转换）。我相信您可以将它用于屏幕动画，但感觉就像 CSS 中的普通旧 @keyframe 动画一样容易满足您的需求。

无论如何，要开始使用 Vue 过渡，您需要将要过渡的元素包装在过渡标签内。然后你需要给它一个条件v-if是一个简单的例子，如果满足条件，元素就会被渲染。

<transition name="myTransition">
  <div class="someClass" v-if="myCondition">Thingy to transition</div>
  <!-- you can have multiple elements in here -->
</transition>
<button v-on:click="myCondition = !myCondition">Toggle</button>

然后您需要根据转换名称定义 CSS 以使用 bunch of states。以不透明度为例：

.someClass {
   transition: opacity 0.5s ease;
}
.someClass.myTransition-enter {
   /* example showing chained classes since the myTransition- is added */
   opacity: 0;
}
.someClass.myTransition-enter-to {
   opacity: 1;
}

Vue 在不同阶段自动从带有v-if 的元素中添加和删除这些类。

Vue 也可以转换元素的状态，但没有Vue Transitions。

【讨论】：

【解决方案3】：

我看到了你的重复线程，你在示例代码中的问题是关于 css 的。单击框时，您应该将框的宽度从70px 更改为100%。为此，请创建另一个 css 类：

.meal__status--active .meal__status-wrap {
  background-color: #42b983;
  height: 60px;
  width: 100%;
  display: block;
  position: relative;
  z-index: 99999;
}

【讨论】：