Сдвиг вверх с помощью vue

Question

Я новичок в 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

вот что у меня

this is what I am trying to achieve введите описание изображения здесь

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

Answer 2

Я видел вашу дублирующуюся цепочку, ваша проблема в примере кода - около css. Вы должны изменить ширину поля с 70px на 100% при нажатии на поле. Для этого создайте другой css класс:

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

Answer 3

Vue Переход выполняется для работы между Vue состояниями или маршрутами (думайте о переходе страниц). Я уверен, что вы могли бы использовать его для экранной анимации, но похоже, что это обычная старая @keyframe анимация в 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>

Затем вам нужно определить от CSS до go с набором состояний на основе имени перехода. Используя в качестве примера непрозрачность:

.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 переходов .