Vue JS - Tranzitie si Animatie

<style>
.cls_h {
color:#00e;
}
.test-enter-active, .test-leave-active {
 transition: opacity 1s;
}
.test-enter, .test-leave-to {
 opacity: 0;
}
</style>

<div id='demo'>
 <transition name='test'>
 <h3 v-show ='show' class='cls_h'>Ca sa am pace, dau pace.</h3>
 </transition>
 <button v-on:click='show = !show'>Show /Hide</button>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ show:false }
});
</script>

<style>
.cls_h {
color:#00e;
}
.test-enter-active, .test-leave-active {
 transition: opacity 1s;
}
.test-enter, .test-leave-to {
 opacity: 0;
}
</style>

<div id='demo'>
 <transition name='test'>
 <comp_test v-show='show'></comp_test>
 </transition>
 <button v-on:click ='show = !show'>Show /Hide</button>
</div>

<script>
Vue.component('comp_test', {
 props: ['show'],
 data: function(){
 return {msg:'Daruirea si primirea sunt una; Dau ceea ce vreau sa primesc.'}
 },
 template: "<h3 class='cls_h'>{{msg}}</h3>"
});

var vm = new Vue({
 el: '#demo',
 data:{show:false}
});
</script>

<style>
.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}
</style>

<div id='demo'>
<transition name='fade'>
 <h3 v-if='rest ==1'>This is in the tag with v-if, rest ={{rest}}.</h3>
 <div v-else-if='rest ==2'>This is from v-else-if, rest ={{rest}}.</div>
 <h4 v-else>This content is from v-else, rest not 1 or 2; rest ={{rest}}.</h4>
</transition>
 Click to <button @click='altrElm'>Alternate elements</button>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ rest:0, nr:0 },
 methods:{
 altrElm:function(){
 this.nr++;
 this.rest = this.nr %3;
 }
 }
});
</script>

<style>
.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}
</style>

<div id='demo'>
Example with multiple <b>v-if</b>, without <b>mode</b> attribute: 
<transition name='fade'>
 <button @click='bState' v-if='b_state =="saved"' key='saved'>Save</button>
 <button @click='bState' v-if='b_state =="edited"' key='edited'>Edit</button>
</transition>
<br><br>

Example with a single element binded to a dynamic property (here is_save), and <b>mode</b> attribute: 
<transition name='fade' mode='out-in'>
 <button @click='btnState' v-bind:key='is_save'>{{ btn_txt }}</button>
</transition>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ b_state:'saved', btn_txt:'Save', is_save:true},
 methods:{
 //for example with v-if
 bState: function(ev){
 this.b_state = (this.b_state =='saved') ? 'edited' :'saved';
 },

 //for example with single element binded to is_save
 btnState: function(ev){
 this.is_save = !this.is_save;
 this.btn_txt = this.is_save ? 'Save' :'Edit';
 }
 }
});
</script>

<style>
.cls_d {
background:#dadafe;
font-size:20px;
height:100px;
text-align:center;
width:180px;
}
@keyframes ex_anim {
 0% { background:#fe1234; width:0;height:0; font-size:0;}
 50% {
 border-radius: 100%;
 transform: rotate(180deg);
 }
 100% {
 background:#bbbbfe;
 transform: rotate(360deg);
 transform: scale(1.05);
 font-size:8px;
 }
}

.ro_x-enter-active {
 animation-name: ex_anim;
 animation-duration: 1.5s;
}
.ro_x-leave-active {
 animation: ex_anim reverse;
 animation-duration: 1.5s;
}
</style>

<div id='demo'>
 <transition name='ro_x'>
 <div v-show ='show' class='cls_d'>Trecutul dispare, clipa ramane.<br>Cine sunt Eu?</div>
 </transition>
 <button v-on:click ='show = !show'>Show /Hide</button>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ show:true }
});
</script>

<style>
.cls_d {
background:#dadafe;
font-size:20px;
height:100px;
text-align:center;
width:180px;
}
@keyframes ex_anim {
 0% { background:#fe1234; width:0;height:0; font-size:0;}
 50% {
 border-radius: 100%;
 transform: rotate(180deg);
 }
 100% {
 background:#bbbbfe;
 transform: rotate(360deg);
 transform: scale(1.05);
 font-size:8px;
 }
}

.ro_x-enter-active {
 animation-name: ex_anim;
 animation-duration: 2s;
}
</style>

<div id='demo'>
 <transition name='ro_x' appear>
 <div class='cls_d'>Trecutul dispare, clipa ramane.<br>Cine sunt Eu?</div>
 </transition>
</div>

<script>
var vm = new Vue({
 el: '#demo'
});
</script>

<link href='//cdn.jsdelivr.net/npm/animate.css@3.5.1' rel='stylesheet' type='text/css'>

<div id='demo' style='text-align:center'>
<button @click='show = !show'>Toggle render</button>
<transition name='custom_cls' enter-active-class='animated tada' leave-active-class='animated bounceOutRight'>
 <h3 v-if='show'>Iubesc Viata</h3>
</transition>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: { show: true }
});
</script>

<div id='demo' style='text-align:center'>
<button @click='show = !show'>Toggle render</button>
<transition v-on:before-enter='beforeEnter' v-on:enter='enter' v-on:leave='leave' v-bind:css='false'>
 <h3 v-if='show'>Iubesc Viata</h3>
</transition>
</div>

<script>
document.write('<sc'+'ript src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></sc'+'ript>');

var vm = new Vue({
 el: '#demo',
 data: { show: false },
 methods: {
 beforeEnter: function(el){
 el.style.opacity = 0
 },
 //done callback is optional when used in combination with CSS
 enter: function(el, done){
 Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
 Velocity(el, { fontSize: '1em' }, { complete: done })
 },
 leave: function(el, done){
 Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 });
 Velocity(el, { rotateZ: '100deg' }, { loop: 2 });
 Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done });
 }
 }
});
</script>