[Vue.js] Managing CSS Styles

//HTML
<label :class= ['font-weight-bold', 'mr-2'] >
//we can programically modify the styles
<input :style="{'width': '60px', 'text-align':'center'}">
<input :style="{'width':inputWidth + 'px', textAlign:'center'}


//JavaScript Vue file
var app = new Vue({
el: '#app',
data: {
	labelArr: ['font-weight-bold', 'mr-2'],
},
computed: {
	sliderState: function() {
    return this.sliderStauts? 'd-flex': 'd-none'
} //It changes the style of the object each time

 

ANIMATION

//ANIMATION
//.js file
.fade-enter, .fade-leave-to {
	opacity: 0;
}

.fade-endter-active, .fade-leave-active {
	transition: all 1s ease-in-out;
}

 

//BUILD IN PAGES
//Use the code of animate.css cloudfare animation

<transition name="custom"
	enter-active-class="animated fadeInDown"
    leave-active-class="animated slideOutRight">

 

TRANSITION GROUP

//HTML
<transition-group 
	name="fade" tag="div" 
	enter-active-class="animated fadeInRight"
	leave-active-class="animated slideOutRight">
	<div 
    	class="row d-flex mb-3 align-items-center"
    	v-for="item in products" :key="item.id">
    </div>
</transition-group>

 

Managing Styles with JavaScript

//HTML
<transition-group name="fade" tag="div"
	@beforeEnter="beforeEnter"
    @enter="enter"
    @leave="leave">
    <div class="..."
    	v-for="(item, index) in products"
    	:data-index="index">
</transition-group>

//JS
...
methods: {
	beforeEnter: function(el) {
    //el makes you to use the element
    	el.className='d-none'
    },
    enter: function(el) {
    	var delay=el.dataset.index * 100;
        setTimeout(function()=>{
        	el.className='row mb-3 align-items-center animaded fadeInRight'
        }, delay);
    },
    leave: function(el) {
    	var delay=el.dataset.index * 100;
        setTimeout(function()=>{
        	el.className='row mb-3 align-items-center animaded fadeOutRight'
        }, delay);
    },
	...
}
...