While exploring different methods for creating a number scrolling animation, I stumbled upon the following code snippet (written in SCSS and Vue):
new Vue({
el: ".app",
data: {
number: 0
},
methods: {
setNumber(e) {
this.number = e.target.value;
}
},
computed: {
numberString() {
return String(this.number).padStart(this.total, "0");
}
},
created() {
this.total = 9;
}
});* {
margin: 0;
padding: 0;
}
// CSS styles hereHTML elements and script tags here...(Link to Original Codepen: https://codepen.io/lpjc/pen/MWpMxYa)
Though familiar with Vue and Sass basics, I found two parts of the code confusing:
- HTML: The usage of 'i' in the style binding section puzzled me. Where does it come from?
<div class="item__digit" :style="transform: `translateY(${Number(numberString.charAt(i - 1)) * -100}%)`">- SCSS: I was unsure about the purpose of this section in relation to displaying changing numbers. How is the content updated? I know #{} signifies interpolation and $var indicates variables.
&-list {
&:before {
display: block;
// SCSS styling explanation here
}
} Despite researching official documentation and online resources, I struggled to find detailed explanations on these specific queries.