如何在Vue中重置CSS动画

2023-12-21

我有一个这样的列表:

var v = new Vue({
  'el' : '#app',
  'data' : {
    'list' : [1,2,3,4,5,6,7,8,9,10]
  },
  
  methods: {
    activateClass($event){
      $event.target.classList.remove('animate');
      void $event.target.offsetWidth;
      $event.target.classList.add('animate');
    },
    changeRandomValue(){
      var randomAmount = Math.round(Math.random() * 12);
      var randomIndex = Math.floor(Math.random() * this.list.length);
      Vue.set(this.list, randomIndex, randomAmount)
    }
  },
  
  mounted(){
    var vm = this;
    setInterval(function(){
      vm.changeRandomValue();
    }, 500);
  }
})
.animate{
  animation: fade 0.5s;
}

@keyframes fade{
  0% { background:blue; }
  100% { background:white; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in list" v-html="item" @click="activateClass($event)"></li>
  </ul>
</div>

如果运行上面的代码片段,您会发现如果单击 li 它将使用以下代码:

activateClass($event){
  $event.target.classList.remove('animate');
  void $event.target.offsetWidth;
  $event.target.classList.add('animate');
}

向其中添加一个类并播放动画(https://css-tricks.com/restart-css-animation/ https://css-tricks.com/restart-css-animation/)。惊人的!

现在,我也有一个changeRandomValue()从列表数组中选择一个元素并更改其值的函数。

我将如何使用activateClass方法从内部changeRandomValue method?

我对在元素上使用事件有一些想法,所以它会是这样的:

<li v-for="item in list" v-html="item"
    @click="activateClass($event)"
    @myValueChanged="activateClass($event)"
></li>

但我认为这样的事情不存在。我也一直在研究观察者,但我认为这并不是他们真正的目的。

我可以毫无问题地获取已单击的元素并查找它所引用的数据,但我无法弄清楚如何获取已更改的数据,然后找到其 dom 引用。

我不使用类绑定的原因是我需要触发回流。也许有一个非常简单的方法可以用 vue 做到这一点,但我不知道。


一种简单的解决方案是使用类绑定 https://v2.vuejs.org/v2/guide/class-and-style.html and the animationend https://v2.vuejs.org/v2/guide/transitions.html#CSS-Animations event.
您还可以通过编程方式触发相同的解决方案,如mounted event.

new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      highlight: false
    }, {
      id: 2,
      highlight: false
    }]
  },
  mounted() {
    // Demonstrate programmatic highlighting
    setTimeout(() => {
      this.items[1].highlight = true
      setTimeout(() => {
        this.items[1].highlight = true
      }, 1000)
    }, 1000)
  },
  methods: {
    addClass(item) {
      item.highlight = true
    },
    removeClass(item) {
      item.highlight = false
    }
  }
})
p {
  cursor: pointer;
}

.animate {
  animation: fade 0.5s;
}

@keyframes fade {
  0% {
    background: blue;
  }
  100% {
    background: white;
  }
}
<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <p v-for="item in items" v-bind:class="{ animate: item.highlight }" v-on:click="addClass(item)" v-on:animationend="removeClass(item)">{{ item.id }}</p>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在Vue中重置CSS动画 的相关文章

  • 使用 Bootstrap 3 具有固定高度、标题和列宽度的表格

    我想要一张具有以下功能的表 固定标题 固定高度 带有可见的滚动条 3个固定宽度的列 一个大列和两个窄列 我开始使用 tbody display block overflow auto height 100px 为了至少获得固定高度 但此规则
  • ABSMIDDLE 在 Firefox 和 Chrome 上的工作方式不同吗?

    我有一个图标图像和文本 如下所示 一切的代码来源是 img src align left My Title Here 问题在于 与 Firefox 相比 Chrome 中的图标没有与标题垂直对齐 我觉得absmiddle根本不起作用 有什么
  • 如何在 HTML 元素中使用 CSS 设置特定单词的样式?

    如何设置其中特定单词的样式 p 标签 前任 STUDIO X是有史以来最好的工作室 如何使用 css 将 STUDIO X 设为与 is the best studio ever 不同的字体 你应该做这个 p font size 12px
  • 在 Asp.Net 中以编程方式添加样式表

    我想以编程方式在头部添加样式表 但我看到的示例之一似乎需要多行代码才能添加一个样式表 即使我可能需要很多 示例代码 HtmlLink css new HtmlLink css Href css fancyforms css css Attr
  • 缩放网页内容上的特定元素(HTML、CSS、JavaScript)

    如果用户在移动设备上缩放网站 我只想缩放网站的特定元素 某个 div 下图展示了我的想法 如您所见 测试已缩放 但顶部 div 保持相同大小 仅包含 test 的 div 被缩放 缩放 有人可以给我一些关于如何实现这一目标的提示吗 我真的不
  • 如何避免 Angular 材料中出现额外的 mat-form-field-underline

    我在查找为什么在使用组件时会出现额外的 mat form field underline 时遇到问题 我的页面使用此标记
  • 在 css / html 中创建六边形

    我试图在 css html 中制作几个六边形 类似于这样 http www asta uk com sites all themes asta logo png http www asta uk com sites all themes a
  • Mapbox JS SDK CSS样式表导致地图消失

    我在 VueJS 应用程序中使用 Mapbox JavaScript SDK 我可以毫无问题地显示地图 现在我想添加一些标记 我懂了在本页 https docs mapbox com mapbox gl js api 您需要先导入 CSS
  • 使用 javascript 设置最大高度

    我有一个 div 这个 div 的最大宽度是用户定义的 我知道我可以使用 element style height 完成它 但这在 IE 中不起作用 关于如何使用 javascript 实现 Firefox 的最大高度等效项有什么想法吗 通
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • iPhone 上的 Chrome 溢出空白页面上的内容(仅在新选项卡上,而不是重新加载)

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码
  • 单击按钮重复动画

    我想每次单击按钮时都重复动画 我尝试做某事像这样 https jsfiddle net 91raod7e const dist document querySelector dist document querySelector butto
  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间

随机推荐