Encountering a peculiar issue where the style in my Vue component is not being compiled and applied alongside the template and script. Here's the code snippet:
To achieve an animated slide fade effect on hidden text upon clicking a button, I've written the following code. However, the desired CSS animation is not taking effect even though the text becomes visible.
app.vue
<template>
<div>
<button @click="show = !show">
Click Me
</button>
<transition name="slide-fade">
<p class="test-style" v-if="show">This is a hidden message.</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
};
</script>
<style scoped>
.test-style {
color: red;
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
app.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: '#app',
render: h => h(App),
});
Edit - Aug 10th, 2020
My package.json details are as follows:
{
"name": "www",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"vue": "^2.6.11"
},
"devDependencies": {
"css-loader": "^4.2.1",
"nodemon-webpack-plugin": "^4.3.2",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"scripts": {
"build": "webpack",
"dev": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}