如何在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动画 的相关文章

  • ABSMIDDLE 在 Firefox 和 Chrome 上的工作方式不同吗?

    我有一个图标图像和文本 如下所示 一切的代码来源是 img src align left My Title Here 问题在于 与 Firefox 相比 Chrome 中的图标没有与标题垂直对齐 我觉得absmiddle根本不起作用 有什么
  • jQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见

    我正在寻找一种方法来确定使用 JavaScript jQuery 是否显示 WooCommerce 商店通知 商店通知的 HTML 看起来像这样 p class woocommerce store notice demo store sty
  • 使用 css 将 div 框置于页面中间居中

    我想将 div 放在页面中间居中 我尝试过top 30 但是当窗口大小调整偏离对齐方式时 div div 谢谢 让 如果您知道该 div 的高度 宽度 例如 它将是 100px X 200px 那么您可以这样做 cent position
  • 根据分辨率更改字体大小

    我正在开发一个网页 它的不同段落 h 等使用不同的尺寸 我在用着em sizes 字体大小 2em 举个例子 但是 当我将屏幕分辨率更改为较低的分辨率时 我希望该尺寸也较小 为此 我尝试了以下代码
  • 个人Vue 3组件包缺少模板或渲染函数

    我最近将自己的 Vue 3 组件上传到 NPM 以供其他人使用 当在其他项目中使用它时 它会发出以下警告 Vue warn Component is missing template or render function at
  • 第二个子div高度填充父级高度

    我有一个 div 文章 它有两个子项 标题和 content outer 标题有一个正确的高度 我希望 content outer 有一个高度 没有给出具体数字 例如 200px 以便标题高度 content outer 高度 文章高度 这
  • 水平离子涡旋不工作

    在我正在制作的项目中 我使用了离子滚动两次并且工作完美 垂直模式 但现在我尝试进行水平滚动并且不起作用 滚动出现但我无法滚动任何内容 HTML 代码很简单
  • Chrome DevTools:计算样式与 css 规则不同?

    当我在 CSS 文件中定义 4px 时 我的 DOM 元素的 border top width 怎么可能是 0px 当我使用 Chrome DevTools 检查元素时 我发现计算的样式告诉 0px 而最上面的 css 规则是 4px 而且
  • 为什么inline-block元素出现在inline元素的下方?如何让它们出现在同一行?

    我目前正在尝试理解基本的 HTML 和 CSS 概念 并遇到了一个非常奇怪的问题 我有两个元素 一个具有 display inline 另一个具有 display inline block 我正在尝试创建一个列表 类似的东西1 SOME C
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • 如何使用 Cypress 定位没有 id 属性的嵌套输入?

    我正在为 React 项目编写 Cypress 测试 我需要能够瞄准
  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • 从组件传递数据

    我对 Vue 相当陌生 我正在尝试将数据从组件传递到视图 我不确定我是否在使用props正确的 我有一个对话框 当我保存时 我想将数据插入数据库 我也想重复使用addCustomer function 这就是为什么我没有将该函数放置在组件中
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • 将 Div 放置在另一个 DIV 下方

    我有两个 DIV 元素 其中之一具有绝对位置 主 DIV 的左下角 第二个 DIV 是隐藏的 只有单击链接才能显示 我需要第二个出现在第一个下方 但由于第一个 div 的位置是绝对的 第二个 div 出现在第一个 div 之上 HTML 代
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权

随机推荐