Guide to creating width animation using inline CSS

I'm currently working on animating the width of an element based on data retrieved from an API when the page loads, and I'm utilizing Vue.js for this task. I have successfully applied the width value from the API data using inline CSS, but I am facing an issue with achieving the desired animation effect.

Edited Vue Template:

<li v-for="(stats, index) in teamStats[0]">
    <div class="bar">
        <span :style="'width:'+ stats +'%;'">
            {{stats}}
        </span>
    </div>
</li>

Sass:

.bar {
    span {
        text-align: $l;
        right: 0;
        width: 0%;
        -webkit-transition: width 1s;
        -moz-transition: width 1s;
        -o-transition: width 1s;
        transition: width 1s;
    }
}
htmlcsssassvue.js

Answer №1

To achieve the desired effect, you may want to utilize the JavaScript transition hooks. Below is an illustration.

new Vue({
  el: '#app',
  
  data: {
    stats: [],
  },
  
  created() {
    // Simulate loading data from server
    setTimeout(() => {
      this.stats = [0.1, 0.15, 0.32, 0.55, 0.88, 0.96];
    }, 500);
  },
  
  methods: {
    onEnter(el) {
      var stat = +el.dataset.stat;
      var index = +el.dataset.index;
      el.style.transitionDelay = index * 0.05 + 's';
      el.style.width = (stat * 100) + '%';
      el.style.backgroundColor = `hsl(${50 - 50 * stat | 0}, 100%, 50%)`;
    },
  },
});
.bars {
  width: 400px;
}

.bar {
  margin: 5px 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  padding: 5px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.bar.v-enter-active {
  transition: all 1s cubic-bezier(0, 1, 0.5, 1);
}

.bar.v-enter {
  /* Needs !important to override inline styles */
  opacity: 0;
  width: 0% !important;
  background-color: hsl(50, 100%, 50%) !important;
}
<script src="https://cdn.rawgit.com/vuejs/vue/dev/dist/vue.min.js"></script>

<div id="app">
  <transition-group tag="div" class="bars" @enter="onEnter">
    <div class="bar" v-for="stat, index of stats" :key="stat" :data-stat="stat" :data-index="index">
      {{ (stat * 100 | 0) }}%
    </div>
  </transition-group>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet: .dropdown-content { display: none; po ...

htmlcss

Having an issue with eslint in combination with the vue/comment directive

Hey there, I was working on my website when suddenly I encountered 20 errors similar to this: Module Error (from ./node_modules/eslint-loader/dist/cjs.js): error clear vue/comment-directive Do you have any suggestions on how to solve this issue? ...

vue.jsnuxt.jseslint

menu roll-up in an upward direction

Is there a way to implement the CSS effects mentioned in this article to make the menu roll up instead of down? Learn How to Create a Menu that Rolls Up Using CSS! ...

htmlcssdrop-down-menu

Is there a Node template engine similar to EJS that seamlessly integrates with HTML templates?

Is there a template engine for NodeJS similar to EJS that doesn't alter the original HTML template structure with its use of parentheses? In EJS, one might utilize the following code snippet to embed specific data into the HTML template: <script& ...

javascripthtmlnode.jstemplates

Issues with aligning center vertically and horizontally using flexbox are causing unexpected behavior

Understanding the basic concepts of centering a flex container using justify-content:center and align-items: center, I am facing an alignment issue with my box. Can anyone help me with this? This is what I have attempted so far: <template> <di ...

javascripthtmlcssvue.jsflexbox

Ensuring Consistent Height for Bootstrap Card Headers

I am currently working with bootstrap cards on two different web pages. The challenge I am facing is that on one page, the header text has a fixed height so I can easily match their card-header height using min-height. However, on the second page, the card ...

javascripthtmlcssbootstrap-4

The Angular carousel fails to display or operate properly

I am encountering an issue where the content is not displaying when using the angular-carousel directives: <ul rn-carousel rn-carousel-controls rn-carousel-index="carouselIndex" rn-carousel-buffered > <li ng-repeat="slide in slides track by ...

javascripthtmlangularjsangular-carousel

I'm facing an issue with my 'root' div on ReactJS - it doesn't stretch all the way to the top. Any suggestions on how I can make it expand properly

While I realize this issue has been discussed extensively, none of the suggested solutions have worked for me. As a final attempt to resolve it, I am turning to you all here. The point at which my root div stops is puzzling: I've explicitly defined ...

htmlcssreactjsroot

What is the method for obtaining the total row of an ngFor loop within an HTML file?

I am trying to figure out how to retrieve the total number of rows in an ngFor loop and display it above. Any suggestions? <p>Total row: "I need to display the number of rows here"</p> <table class="table" > &l ...

htmlangularwebangular9

Automatically log users out of Django and update the backend after a period of inactivity without requiring any additional requests

In my Django project, I am working on a simple multiplayer system where I need to update the isCurrentlyActive value in a user-related model automatically and then log them out. I tried using middleware following a solution from this post, which works well ...

javascripthtmlcssdjango

When typing at least 3 characters, a dropdown menu will be populated with options based on the user

Is there a way to implement a select element (preferably using v-select) that initially has no options, but will fetch the options only after at least 3 characters are typed in? Unlike most standard select elements where options are filtered as you type, I ...

vue.jsvuetify.jsvuex

modify pseudo element's style in Angular based on a particular condition

I am trying to change the style of :before based on a condition. I attempted to implement the solution provided at , but it did not work as expected. Here is my code: .sender:before { content: ""; width: 0px; ...

htmlangularsass

Remove newline character from HTML code using Python 3.2 and urllib module

After fetching HTML content as a string using urllib, I encountered difficulty in searching the string due to its HTML format. Is there any way to "unformat" the string by removing all the new lines without altering the HTML code itself? Here is the Pytho ...

pythonhtmlstringformaturllib

What could be causing my div to display a horizontal scrollbar in Firefox?

Here's a straightforward test scenario: <html> <body> <div style="border:2px solid black; overflow: auto;"> x </div> </body> </html> Upon rendering, a horizontal scrollbar appears! I was using F ...

htmlcsslinuxfirefox

What is the best way to insert an anchor tag into text using React?

I am working with a variable const linkElement = `Hey this is a link ${<a href="www.google.com">Click me!</a>} that can be clicked}` Currently, it displays as Hey this is a link [Object object] that can be clicked. Is there a way to ...

javascripthtmlreactjs

Despite being in perfect condition, my If-Else statement is refusing to function properly

I had previously posted a similar question, but it was removed. However, I am still very curious about why something seemingly trivial is not functioning properly. This is the entirety of my HTML and JavaScript code... <!doctype html> <html lang=& ...

javascripthtmljsonif-statementasynchronous

I prefer to disable the toggle feature if the target remains unchanged

My goal is to create a step-by-step ordering system using the data-id="x" attribute to determine which content should be visible when selected. I want to make sure that if two elements have the same data-id, clicking on one will deselect the other. Any su ...

javascriptjqueryhtmlcss

Exploring the potential of overflow within a container with a percentage-based

I am attempting to design a webpage that fills the entire screen height without scroll bars, yet contains a scrollable container within it. Despite trying various approaches with percentage heights, I have not been successful as the percentages do not beha ...

htmlcss

Guide to extracting a key from the route module with the help of vuex-router-sync

I have a Vuex store setup as shown below, and I am using vuex-router-sync to keep it in sync. This plugin adds a router module to my store. However, I am unsure of how to retrieve this object from the store since there are no associated getters with this m ...

javascriptvue.jsvuejs2vuex

Nuxt: Encountered an unexpected < symbol

https://i.sstatic.net/MbM9f.png I've been working on a nuxt project where I'm currently in the process of creating a map component using Google Maps with the help of the plugin https://www.npmjs.com/package/vue2-google-maps. After installing the ...

javascriptvue.jsnuxt.js