Как использовать переход Vue, чтобы расширить и уменьшить div - PullRequest
Новая
       19

Как использовать переход Vue, чтобы расширить и уменьшить div

2 голосов
/ 25 сентября 2019

Используя Vue, у меня есть два div, которые я хочу переключать с переходом.Я хочу медленно увеличить div до желаемой ширины на клик, а затем уменьшить на другой клик.Я могу заставить div расширяться одним кликом, но не могу понять, как уменьшить его при втором клике.

Не совсем понятно, достаточно ли просто указать ширину div, или я должен также указать ту же ширину в классах перехода css.

Эта скрипка показывает, что я пытался: https://jsfiddle.net/vxmh8auo/1/

JS 

new Vue({
  el: '#app',
  data: {
    showButton: true
  },
  methods: {
    randomise () { this.n = Math.random() }
  },
  components:{'input-div':blah}
});

CSS 

.interaction {
  border: 10px solid lightgreen;
  display: flex;
  flex: 1 0 auto;
  max-height: 225px;
  transition: max-height 0.25s ease-out;
}

.default {
   width: 20px;
}
.bigger{
  width: 200px;
}

.expand-enter-active, .expand-leave-active {
  transition-property: width;
  transition-duration: 5s;
 }


.expand-leave-to {
 width: 200px;
}

.expand-enter{
  width: 20px;
}

HTML 

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div class="interaction">
    <button @click="showButton=!showButton">
     <transition name="expand" mode="out-in">
      <div v-if="showButton" v-bind:class="showButton ? 'default':'bigger'" key="small"> B </div>
      <div v-else class="bigger" key="big"> Bigger </div>
     <!--<input-div><</input-div>-->
      </transition>
    </button>
</div>
</div>

Ответы [ 2 ]

1 голос
/ 25 сентября 2019

Вы можете сделать что-то вроде этого, добавить класс «по умолчанию» и переключить класс «больше»: 

  <button @click="toggleBigger">
     <transition name="expand" mode="out-in">
      <div  class="default" v-bind:class="{ bigger: showButton }" key="small"> B </div>

     <!--<input-div><</input-div>-->
      </transition>
    </button>

Добавить метод toggleBigger, его удобнее читать таким образом: 

methods: {
    toggleBigger(){
    this.showButton = !this.showButton;
    }

И добавьте переходы в ваши классы CSS прямо так: 

.default {
  transition: max-height 0.25s ease-out;
   width: 20px;
    transition-property: width;
}
.bigger{
  transition: max-height 0.25s ease-out;
  width: 200px;
  transition-duration: 5s;
   transition-property: width;
}

Вы можете увидеть работающую скрипку ЗДЕСЬ

PS Я не удалил ненужные классы из скрипки.

0 голосов
/ 25 сентября 2019

Это кажется хакерским и содержит много ненужных классов, но это работает: https://jsfiddle.net/df70pk68/

Опять же, мой вариант использования - это кнопка, которая расширяется до компонента с полем ввода, а затем снова сжимается.Мое решение состояло в том, чтобы немедленно сделать прозрачность компонента равной нулю, а затем медленно уменьшить ее.Предотвращает проникновение в поле ввода границы сокращающегося div.Я был бы рад, если бы кто-нибудь нашел более элегантный способ сделать это ....

HTML 

<div id="app">
<div class="interaction">
    <button @click="showButton=!showButton">
     <transition name="fade" mode="out-in">
      <div v-if="showButton" class="default" key="small"> B </div>
      <input-div class="bigger" v-else><</input-div>
      </transition>
    </button>
</div>
</div>

CSS 

.interaction {
  border: 10px solid lightgreen;
  display: flex;
  flex: 1 0 auto;
  max-height: 225px;
}

JS 

const blah = Vue.component('input-div',{
template: '<div><input type="text" readonly></div>'
});
new Vue({
  el: '#app',
  data: {
    showButton: true
  },
  components:{'input-div':blah}
});

.default {
   width: 20px;
}

.bigger{
   width: 250px;
}


.fade-leave-active {
  transition: all 5s ease;
 }

.fade-leave-to{
  width: 300px;
}
.bigger.fade-leave-to{
  width:20px;
  opacity: 0
}
.bigger.fade-leave-active{
  transition: opacity 0s ease;
  transition: width 5s ease;
}
...