Переход анимации компонента в центр в Vue - PullRequest
Новая
       10

Переход анимации компонента в центр в Vue

0 голосов
/ 02 февраля 2020

После нажатия кнопки «Развернуть» в компоненте я хочу, чтобы она была go по центру, поэтому я добавил к ней justify-content: center. Однако я попытался добавить некоторые переходы (translateX), и он полностью сломал компонент. Есть ли способ переместить компонент в центр?

Это текущее поведение, вы можете видеть, что он прыгает прямо к центру.

Codepen 

new Vue({
  el: '#app',
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`,
    show1: true,
    show2: true,
    show3: true,
    show4: true,
    show5: true,
    expand1:true
    
  }),
  methods: {
    hideothers() {
        this.show2=!this.show2,
        this.show3=!this.show3,
        this.show4=!this.show4,
        this.show5=!this.show5,
        this.expand1=!this.expand1
                 }
  }
})
.custom-class {
  justify-content:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap :class="{ 'custom-class': !show2 }">
<!-- top starts here-->
        <v-flex d-flex xs12 sm4 child-flex v-show="show1">
          <v-card color="orange lighten-2" tile flat > 
            <v-card-text>Card 1</v-card-text>
             <v-btn flat  @click="hideothers()">Expand</v-btn>
             <v-card-text>
                  <v-expand-transition>
                    <div v-show="expand1">This is a short paragraph</div>
                  </v-expand-transition>
                  <v-expand-transition>
                    <div v-show="!expand1">
                      <p>A looooong</p>
                      <p>paragraph</p>
                    </div>
                  </v-expand-transition>
                </v-card-text>
          </v-card>
        </v-flex>
        
         <v-flex xs12 sm4 child-flex v-show="show2" :class="{ 'd-flex': show2 }">
           <v-fade-transition>
             
           
          <v-card color="orange lighten-2" tile flat  v-show="show2">
            <v-card-text>
            <v-layout row wrap>
              <v-flex sm6>
                 Card1
              </v-flex>
              <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
               <v-flex sm6>
                 Card1
              </v-flex>
            </v-layout>
            </v-card-text>
          </v-card>
             </v-fade-transition>
        </v-flex>

        <v-flex xs12 sm4 v-show="show3" :class="{ 'd-flex': show3 }">
          <v-card color="red lighten-2" dark tile flat  v-show="show3">
            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
          </v-card>
        </v-flex>
  <!-- TOP part ends here-->     
        
         <v-flex xs12 sm4 child-flex v-show="show4" :class="{ 'd-flex': show4 }">
          <v-card color="purple lighten-1" tile flat v-show="show4">
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 sm4 child-flex v-show="show5"  :class="{ 'd-flex': show2 }">
          <v-card color="green lighten-2" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
       
      </v-layout>
    </v-container>
  </v-app>
</div>
...