Javascript 使用vue向上滑动过渡

我是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>

这就是我所拥有的

这就是我想要达到的目标
Vue转换是为了在两者之间工作（想想页面转换）。我相信你可以将其用于屏幕动画，但这感觉就像CSS中普通的老的
@关键帧
动画一样容易实现你想要的效果

无论如何，要开始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>

Vue会在不同的阶段使用
v-if
自动在元素中添加和删除这些类

Vue也可以转换元素的状态，但不需要转换。
转换仅适用于使用v-if或v-show显示/隐藏元素的情况。因为您没有使用
v-if
或
v-show
，所以不应该尝试使用转换

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

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




导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
Mealstatus活动：错误
};
}
};


.膳食状况{
背景色：#42b983；
高度：60px；
宽度：70px；
显示：块；
位置：相对位置；
z指数：99999；
}
.MEIN___状态—活动{
利润上限：-60px；
宽度：100%；
}
.覆盖{
背景：rgba（0,0,0,0.9）；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
显示：块；
文本对齐：居中；
过渡：不透明度500ms；
不透明度：1；
}
我看到了重复的线程，示例代码中的问题是关于css的。单击方框时，应将方框宽度从
70px
更改为
100%
。为此，请创建另一个css类：

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

宽度不会增加@BryceHowitson@AdogaPatricia不知道我能帮你什么忙。我至少要看到更新的代码。@brychowitson，我的类名有误，谢谢你的帮助。
.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;
}

<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>

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