CODEWITHSUNDEEP
vue.js
Mr.Richway
Mr.Richway

Reputation: 151

Keep DOM visible after transition in vue.js

I'm trying to create a transition with a circle that will expand to fill the 100% of the width and height of the container but I can't seem to get the DOM to remain visible after the transition.

I'm in the process of learning vue.js so I'm not sure if this is intended or not is there a way to keep the circle visible when it's expanded to the scale(100)? Is there a better way to achieve this?

html:

<div id="app">
  <div v-show="show" :transition="zoomCircle" class="circle"></div>
  <button @click="show = ! show">zoom</button>
</div>

js:

Vue.transition('zoom', {
  enterClass: 'zoomOut',
  leaveClass: 'zoomIn'
});
new Vue({
  el: '#app',
  data: {
    show: true,
    zoomCircle: 'zoom'
  }
});

related fiddle: https://jsfiddle.net/joepaulgo/hkfg9vpr/

Upvotes: 2

Views: 1538

Answers (1)

Linus Borg
Linus Borg

Reputation: 23968

  1. You set show: false, thereby hiding the element. remove the v-show.
  2. You don't need a Vue transition at all (which are for hiding/showing elements/components), use a class binding to add the class you need.
  3. If you want it to stay in the end form, you should not use an CSS animation, but simple CSS class with transform: scale(100), because animations change back to the original stile after they are finished.

Unfortunately I can'T remember the correct CSS to do this with a transition right now.

Edit: got it: https://jsfiddle.net/hkfg9vpr/3/

Upvotes: 1

Related Questions