I have "new element", it's hidden by v-if. When I click on button "display", it will slide a "old element" down and I display a new element on the top. How can I do that with css and javascript?

<div v-if="display"> new element </div>
<div> old element </div>

<button> display a new element</div>

CodePudding user response：

Solution 1 : vue transitions

you should use vue transitions if you want the v-if

example :

Template

<Transition name="slide">
   <div v-if="display">New element<div>
</Transition>
<div>New element<div>

<button @click="display = true">
   Display new element
</button>

style

.slide-enter-active,
.slide-leave-active {
  transition: 0.5s ease;
}

.slide-enter-to, .slide-leave {
   max-height: 1.5em; // depends on you element height
   overflow: hidden;
}

.slide-enter, .slide-leave-to {
   overflow: hidden;
   max-height: 0;
}

(if you don't want the overflow hidden effect you should dig deeper and use transform and opacity to do the trick)

you can read more about vue transitions here : https://vuejs.org/guide/built-ins/transition.html

Solution 2 : css only

or you can do it with only css using a class .display_slide-down

instead of using the v-if and <transition> you can just use a class that you'll toggle using :

<div  :>New element</div>

.newelement{
   visibility: hidden;
   overflow: hidden;
   max-height: 0;
}
.newelement.visible-slide{
   visibility: visible;
   max-height: 1.5em;
}

CodePudding user response：

Assuming that display is default false

data(){
  display:false;
}

You can add click event on button

<div v-if="display"> New element </div>
<div v-else> old element </div>

<button @click="display = true">
  Display new element
</button>