Learn how to make a specific row blink twice with the power of Vue.js and Vuetify

Question

Learn how to make a specific row blink twice with the power of Vue.js and Vuetify

Once a record is successfully created, I have implemented a feature where an alert message appears in green if the API returns 200 OK, and red if not. This functionality is currently working flawlessly thanks to my use of Vuex + Vuetify Snackbar.

this.notificationData = {
    color: 'green',
    text: campaign.name + ' - deleted successfully !'
}



<v-snackbar timeout="1000" v-model="notification" absolute top :color="notificationData.color" outlined right>
    <strong>
        {{ notificationData.text }}
    </strong>
</v-snackbar>

https://i.sstatic.net/lGnoN.png

In order to enhance the user experience even further, I am looking to add a slight animation effect by making that specific row blink for 1 second (2 times).

I do have access to the campaign.name property.

How can I achieve this in Vue.js?

javascript vue.js vuejs2 vuetify.js

Answer 1

Answer №1

If you want to add a custom row class to your v-data-table, you can utilize the item-class prop.

As stated in the documentation, this prop allows you to specify a property on each item that contains the class for that row.

You can provide a function to this prop that determines the class based on certain conditions, such as adding a class like blink.

Here's a demonstration showcasing this feature: (be sure to click on Full page after running the code snippet below to appreciate the effect)

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      rowToBlink: null,
      items: [{
          id: 1,
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          id: 2,
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          id: 3,
          name: 'Eclair',
          calories: 262,
        },
        {
          id: 4,
          name: 'Cupcake',
          calories: 305,
        },
      ],
      headers: [{
          text: 'Dessert',
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories'
        },
      ],
    };
  },
  methods: {
    blink(item) {
      if (item.id === this.rowToBlink) return 'blink';
      return '';
    }
  },
});

.blink {
  animation: blinking ease-out 1s 2;
}

@keyframes blinking {
  0% {
    background-color: #06c3d1;
  }
  100% {
    background-color: #fff;
  }
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f0f9f8e2d6a2b8ee">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394f4c5c4d505f40790b1741">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6315160623514d1b">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="097f7c6c7d606f70493b2771">[email protected]</a>/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-5">
        <v-autocomplete v-model="rowToBlink" outlined label="select row to blink" :items="items" item-text="name" item-value="id"></v-text-field>
      </v-row>
      <v-row class="px-5">
        <v-data-table hide-default-footer :headers="headers" :items="items" :item-class="blink"></v-data-table>
      </v-row>
    </v-container>
  </v-app>
</div>

In the example provided, I connected the data table items array to a select box for easy selection and applied a method called blink to the item-class prop of the data table component.

The purpose of the blink function is to assign the 'blink' class to the specified row in the table if the selected item's ID matches the item's ID, or return no class otherwise.

To achieve the blinking effect, use the defined .blink CSS class where you can customize the animation duration, delay, easing function, etc.

For real-world implementation, consider storing important information (like campaign names) in variables retrieved from API calls:

async apiCall(someArg, campaignName) {
 const res = await apiFn(someArg);
 // Store the campaign name if it meets certain criteria
 if (res) this.campaignName = campaignName;
}

Your item-class function could then look something like this:

blink(item) {
 if (item.name === this.campaignName) return 'blink';
 return '';
}

Answer 2

If you want to add a custom row class to your v-data-table, you can utilize the item-class prop.

As stated in the documentation, this prop allows you to specify a property on each item that contains the class for that row.

You can provide a function to this prop that determines the class based on certain conditions, such as adding a class like blink.

Here's a demonstration showcasing this feature: (be sure to click on Full page after running the code snippet below to appreciate the effect)

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      rowToBlink: null,
      items: [{
          id: 1,
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          id: 2,
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          id: 3,
          name: 'Eclair',
          calories: 262,
        },
        {
          id: 4,
          name: 'Cupcake',
          calories: 305,
        },
      ],
      headers: [{
          text: 'Dessert',
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories'
        },
      ],
    };
  },
  methods: {
    blink(item) {
      if (item.id === this.rowToBlink) return 'blink';
      return '';
    }
  },
});

.blink {
  animation: blinking ease-out 1s 2;
}

@keyframes blinking {
  0% {
    background-color: #06c3d1;
  }
  100% {
    background-color: #fff;
  }
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f0f9f8e2d6a2b8ee">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394f4c5c4d505f40790b1741">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6315160623514d1b">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="097f7c6c7d606f70493b2771">[email protected]</a>/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-5">
        <v-autocomplete v-model="rowToBlink" outlined label="select row to blink" :items="items" item-text="name" item-value="id"></v-text-field>
      </v-row>
      <v-row class="px-5">
        <v-data-table hide-default-footer :headers="headers" :items="items" :item-class="blink"></v-data-table>
      </v-row>
    </v-container>
  </v-app>
</div>

In the example provided, I connected the data table items array to a select box for easy selection and applied a method called blink to the item-class prop of the data table component.

The purpose of the blink function is to assign the 'blink' class to the specified row in the table if the selected item's ID matches the item's ID, or return no class otherwise.

To achieve the blinking effect, use the defined .blink CSS class where you can customize the animation duration, delay, easing function, etc.

For real-world implementation, consider storing important information (like campaign names) in variables retrieved from API calls:

async apiCall(someArg, campaignName) {
 const res = await apiFn(someArg);
 // Store the campaign name if it meets certain criteria
 if (res) this.campaignName = campaignName;
}

Your item-class function could then look something like this:

blink(item) {
 if (item.name === this.campaignName) return 'blink';
 return '';
}

Answer 3

Answer №2

To achieve this effect, transitions can be utilized.

Vue.js offers a variety of transitions to choose from, such as CSS transition or animate.

Explore Vue.js Transitions

Through Vue.js’ transition system, automatic transition effects can be applied when elements are added or removed from the DOM. Vue.js will handle the addition/removal of CSS classes at appropriate times to trigger CSS transitions or animations for you. You also have the option to provide JavaScript hook functions for custom DOM manipulations during the transition process.

DEMONSTRATION:

Add the desired transition style or create a new one in your CSS file and apply it to your element.

transition="blink"

Next, define three CSS rules: .blink-transition, .blink-enter, and .blink-leave.

.blink-transition {
  transition: all 1s ease;
  background-color: green;
}

.blink-enter, .blink-leave {
  background-color: white;
}

By following these steps, the element will blink for one second as specified in the example provided.

If blinking is not your intended effect, CSS keyframes may be preferable. Refer to the documentation for more information.

UPDATE:

A transition component is now available in Vue.js.

Discover Vue.js 2 Transitions

Instead of specifying a transition parameter, wrap the element you wish to animate with a transition element.

<transition name="blink"> </transition>

Answer 4

To achieve this effect, transitions can be utilized.

Vue.js offers a variety of transitions to choose from, such as CSS transition or animate.

Explore Vue.js Transitions

Through Vue.js’ transition system, automatic transition effects can be applied when elements are added or removed from the DOM. Vue.js will handle the addition/removal of CSS classes at appropriate times to trigger CSS transitions or animations for you. You also have the option to provide JavaScript hook functions for custom DOM manipulations during the transition process.

DEMONSTRATION:

Add the desired transition style or create a new one in your CSS file and apply it to your element.

transition="blink"

Next, define three CSS rules: .blink-transition, .blink-enter, and .blink-leave.

.blink-transition {
  transition: all 1s ease;
  background-color: green;
}

.blink-enter, .blink-leave {
  background-color: white;
}

By following these steps, the element will blink for one second as specified in the example provided.

If blinking is not your intended effect, CSS keyframes may be preferable. Refer to the documentation for more information.

UPDATE:

A transition component is now available in Vue.js.

Discover Vue.js 2 Transitions

Instead of specifying a transition parameter, wrap the element you wish to animate with a transition element.

<transition name="blink"> </transition>

Learn how to make a specific row blink twice with the power of Vue.js and Vuetify

Answer №1

Answer №2

Similar questions

Trigger the click event on a specific class selector to extract the corresponding ID

AngularJS redirection to a different state by utilizing a URL

No children were located within the div element

What are some strategies for stopping a form from redirecting me while utilizing ReactJS and ExpressJS?

The beforePopState event in next/router is not triggering as expected

Adjust the color of the background when hovering with the cursor

Is it possible to hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

Discover the step-by-step guide to integrating the Oxford Dictionary API with ReactJS!

Locate the selected radio button's label

Exploring the Subfolder of Laravel and Vue

Create a row in React JS that includes both a selection option and a button without using any CSS

What could be the reason for a code running successfully in node but not in the REPL environment?

Tips for retrieving an input value following a DOM insertion

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

Renaming errors within a project with a complex nested structure using npm

Using JQuery to enable the movement of divs on a screen through clicking and dragging, without the use of

Trouble toggling Reactstrap navbar in my TypeScript project using NextJS

Issue with clicking a button in Selenium using JavaScript for automation

Is there a method to avoid redeclaring variables in JavaScript with jQuery?

Submitting the form with an extending controller results in an undefined state