# Conditional animation iu-template dashboard 2

**URL:** https://discourse.nodered.org/t/conditional-animation-iu-template-dashboard-2/95695
**Category:** Dashboard
**Tags:** dashboard-2, ui-template
**Created:** [27 February 2025 15:05 UTC](https://discourse.nodered.org/t/conditional-animation-iu-template-dashboard-2/95695 "2025-02-27T15:05:51Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Pepex7](https://avatars.discourse-cdn.com/v4/letter/p/a88e57/32.png) [@Pepex7](https://discourse.nodered.org/u/Pepex7)
#### Post date: [27 February 2025 15:05 UTC](https://discourse.nodered.org/t/conditional-animation-iu-template-dashboard-2/95695/1 "2025-02-27T15:05:52Z")

</div>

I'm adding with ui-template an icon for alerts in dashboard 2.

 ![Captura de Pantalla 2025-02-27 a la(s) 10.40.54](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/03082c407fe25ae47014946e5e8a9dfd41957067.png)

![Captura de Pantalla 2025-02-27 a la(s) 10.39.41](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0c296d384f24652263b6da835bbf904f6110f4d5.png)

```auto
<template>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <div style="text-align: center;">  
        <i v-show="getInvisible()" class="fa-solid fa-bolt blink icon"></i>
        <p v-show="getInvisible()" :items="msg" class ="blink"> {{msg.tmoperado}}</p>
    </div>
</template>

<script>
    export default {
        data () {
        },
        methods: {
        // expose a method to our <template> and Vue Application
            getInvisible: function (item) {
                if (this.msg.tmoperado === "TM OPERADO") 
                return true;
                else 
                return false;
            }
    }
</script>
<style>
    /* define any styles here - supports raw CSS */
    .blink {
        animation: blinker 1.2s linear infinite;
        color: red;
        font-family: sans-serif;
        height: 5%;
    }
    @keyframes blinker {
        100% {
        opacity: 0;
        }
    }
    .altoalarma {
        height: 100%;
    }
    .icon {
    font-size: 30px; /* Tamaño del ícono */
    }
    .invisible {
    visibility: hidden;
    }
</style>

```

any ideas?

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [29 March 2025 15:06 UTC](https://discourse.nodered.org/t/conditional-animation-iu-template-dashboard-2/95695/2 "2025-03-29T15:06:09Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.