[Vuejs]-How to show rest of the text with animation?

by

0👍

You could use a Enter/Exit transition here, but it requires the removal/addition of an element from the page. In this case, I would enable the transitions by using a v-if on showEntireDescription, and apply a key to the <p> container:

new Vue({
  el: '#app',
  data () {
    return {
      showEntireDescription: false,
      supplierDescription: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lectus dui, lobortis in quam non, auctor gravida nisi. Fusce commodo orci at augue lacinia pellentesque. Nullam malesuada rutrum lorem non tempor. Fusce aliquam vehicula nunc, at sodales risus pharetra sit amet. Vestibulum varius, urna non vehicula cursus, ante ipsum lobortis libero, nec luctus ligula tellus placerat nisi. Suspendisse quis leo odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae malesuada sapien. Donec dapibus, neque sit amet egestas commodo, nibh augue tincidunt velit, ut facilisis eros quam vel eros. Vestibulum non neque id dolor maximus finibus ac in nunc. Etiam aliquet suscipit nisl quis ullamcorper. Praesent sed lorem vehicula, sodales turpis quis, porttitor nisi. Suspendisse vitae leo urna. Curabitur sit amet nisl vel massa semper luctus at et orci. Nam tincidunt sapien eros, quis convallis augue pulvinar ac. Pellentesque semper massa odio, ac vehicula nulla facilisis vel.

Fusce maximus sagittis leo eget ornare. Donec semper a sem eget imperdiet. Vestibulum rutrum odio ac nulla laoreet, semper sodales felis condimentum. Nam iaculis non erat quis vestibulum. Sed finibus purus id massa efficitur eleifend. Curabitur ut finibus nisi. Vestibulum quis finibus ligula. Sed sit amet est eget sapien commodo pharetra. Morbi a tellus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras in vestibulum lacus. Nullam ultrices iaculis ex, non ullamcorper nisl dignissim id. Vivamus lacinia porta tellus at lacinia. Nam non leo metus. Nam quam lorem, dictum eu faucibus et, pretium id mi. Quisque eu ligula ut est sagittis aliquet.

Mauris dignissim luctus lacus. Nullam posuere quam a enim dapibus hendrerit. Cras at elementum purus. Morbi vel pharetra nibh. Vestibulum imperdiet ligula eu nunc placerat sollicitudin. Maecenas malesuada, quam a laoreet sodales, lectus est congue ipsum, non ornare nisi eros vel tortor. Praesent elementum libero in lectus pharetra, ut mattis mauris ornare. Cras placerat euismod tellus, a imperdiet velit ultrices et.

Morbi vitae lorem non urna vestibulum interdum. Cras eu mi vel lectus tempor tincidunt in sit amet mauris. Quisque hendrerit accumsan felis quis porttitor. Maecenas neque sem, commodo sed tempus sagittis, porta nec nibh. Pellentesque pretium sodales turpis eu bibendum. Etiam elementum mattis euismod. Donec vestibulum diam diam, eget vulputate ante luctus in. Etiam pretium, felis eu malesuada mattis, ligula risus sodales lorem, vel pharetra mauris velit consequat mauris. Ut diam dui, varius in nunc eget, consectetur elementum felis. Mauris id mi dignissim, viverra leo nec, viverra mi. Cras porttitor convallis tincidunt. Suspendisse sit amet condimentum erat. Aliquam purus leo, malesuada id nulla in, blandit viverra neque. Etiam porta, lorem a ullamcorper dapibus, metus ex finibus nulla, ut sollicitudin nulla lacus nec purus. Nam a orci orci.

Maecenas vulputate urna quis placerat feugiat. Cras sodales dignissim metus, non porttitor lectus efficitur a. Nunc ut purus enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non diam luctus, luctus arcu eget, tristique nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec augue mi, gravida a viverra a, condimentum at velit. Pellentesque nec nibh feugiat, tincidunt nisi at, ornare magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed et orci in eros gravida semper.`
    }
  },
  computed: {
    showSupplierDescription () {
      return this.showEntireDescription ? this.supplierDescription : `${this.supplierDescription.substring(0, 240)}...`
    }
  },
  methods: {
    showEntireSupplierDescription () {
      this.showEntireDescription = !this.showEntireDescription
    }
  }
})
.slide-enter-active {
  transition: all .3s ease;
}
.slide-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
<script src="https://unpkg.com/vue@2.6.7"></script>

<div id="app">
  <button @click="showEntireSupplierDescription">
    Read more
  </button>
  <transition name="slide" mode="out-in">
    <p v-if="showEntireDescription" key="a">
      {{ showSupplierDescription }}
    </p>
    <p v-else key="b">
      {{ showSupplierDescription }}
    </p>
  </transition>
</div>

0👍

You can use your current solution, by using css max-height transitions, and calculating the required height:

<div id="app">

  <p class="desc"  :style="{'max-height':maxHeight + 'px'}">
    <span ref="desc">
        {{ showSupplierDescription }}
    </span>

  </p>
  <a @click="showEntireSupplierDescription">
    Read more
  </a>
</div>


.desc{

  max-width:100px;
  border:1px dashed #666666;
  transition:all 1s;
  overflow:hidden;

}

new Vue({
  el:'#app',
  data:{
    showEntireDescription: false,
    supplierDescription:'some long description goes in here some long description goes in here',
    maxHeight:500 //large default

  },
  mounted:function(){
    this.maxHeight = this.$refs.desc.offsetHeight;
  },
  computed: {
    showSupplierDescription:function () {
      return this.showEntireDescription ? this.supplierDescription : this.supplierDescription.substring(0, 24) + '...';
    }

  },
  methods: {
    showEntireSupplierDescription :function() {
      //switched to toggle for demo
      this.showEntireDescription = !this.showEntireDescription;
      var self = this;
      Vue.nextTick(function () {
        self.maxHeight = self.$refs.desc.offsetHeight;
      });


    }
  }
})

https://codepen.io/sf-steve/pen/bZVRXB

Leave a comment