如何使用 Vue.js 和 Vuetify 使特定行闪烁 2 次？

Question

创建记录后，如果 API 返回 200 OK，我会显示警告绿色消息，否则显示红色。现在，它运行良好，我使用了 Vuex + Vuetify Snackbar。

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



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

我想将用户体验再提高一个档次。我想使该特定行闪烁 1 秒（2 次）。

我知道我可以访问campaign.name

如何在 Vue.js 中实现这一点？

Answer 1

您可以在v-data-table 中使用item-class 属性来实现效果。

根据DOC，我们有这个道具：

提供的项目的属性，包含项目的行类或将项目作为参数并返回相应行的类的函数

因此您可以将此道具传递给基于满足条件的函数，返回类似blink 的类以应用于指定行。

这里是这个功能的demo：（运行下面代码sn -p后请点击Full page看清楚效果）

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

为了这个例子，我将数据表项数组绑定到一个选择框，您可以在其中选择所需的项目，并将一个名为 blink 的方法传递给数据表的 item-class 属性。

此函数的作用是检查选择框中所选项目的 id 是否与数据表的项目 id 匹配，然后为表中的指定项目（行）返回一个名为 'blink' 的类，否则不返回任何类名字。

闪烁效果在 .blink css 类中得到处理，您可以在其中使用 css 功能（持续时间、延迟、缓动函数...）来实现所需的外观。

关于如何在您的实际应用情况中实现这一点的一些想法是在 api 调用返回后将广告系列名称存储在一个变量中，例如：

async apiCall(someArg, campaignName) {
 const res = await apiFn(someArg);
 // store the campaign name in a variable in data object if the res is what you are looking for
 if (res) this.campaignName = campaignName;
}

那么您的 item-class 函数将是这样的：

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

Answer 2

你可以通过转换来做到这一点。

在 vue.js 中实际上有一些过渡可供选择，Mines 将是 CSS 过渡或动画。

Vue.js Transitions

使用 Vue.js 的过渡系统，您可以应用自动过渡 将元素插入 DOM 或从 DOM 中移除时的效果。 Vue.js 将在适当的时候自动添加/删除 CSS 类 为您触发 CSS 过渡或动画，您还可以 提供 JavaScript 钩子函数来执行自定义 DOM 操作 在过渡期间。

示例：

在您的元素上设置您要使用的过渡或尚未在 CSS 中创建的新过渡名称。

transition="blink"

然后您要设置三个 CSS 规则 .blink-transition、.blink-enter 和 .blink-leave。

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

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

就是这样。以上会导致元素闪烁一秒钟。

我的示例可能不会因为您的闪烁而空闲，在这种情况下，我会使用 CSS 关键帧。文档中有一个示例

更新：

Vue.js 现在有一个过渡组件。

Vue.js 2 Tranitions

现在，您可以通过包装您想要动画的内容来使用过渡元素，而不是过渡参数。

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