通过Vue js循环循环动画或活动类

Posted 2023-02-23

【中文标题】通过Vue js循环循环动画或活动类

【英文标题】：Cycle animation or active class through Vue js loop

【发布时间】：2020-02-13 16:44:48

【问题描述】：

我已经在一个旧的 vanilla js 应用程序中创建了这个效果。我有一系列具有悬停动画的块，当没有悬停时，动画会逐块循环。

我已经在 Vue js 中重建了整个应用程序，其他一切都变得更加容易。这是应用程序的唯一部分，我正在努力以没有 dom 操作的“Vue”方式进行操作。基本上我有一个 3 秒的超时，组件获取“活动”类，然后该类切换到 v-for 中的下一个组件。

有什么建议吗？

【参考方案1】：

您应该只需要使用data 中的属性来表示相关状态。每当您想直接操作 DOM 时，只需更新一些状态并将其相应地连接到模板。

希望这个演示能满足您的需求：

new Vue(
  el: '#app',
  
  data () 
    return 
      active: 0,
      
      items: [
        'Red',
        'Green',
        'Blue',
        'Yellow'
      ]
    
  ,
  
  mounted () 
    this.startTimer()
  ,
  
  destroyed () 
    this.stopTimer()
  ,
  
  methods: 
    onMouseEnter (index) 
      this.stopTimer()
      this.active = index
    ,
    
    onMouseLeave () 
      this.startTimer()
    ,
    
    startTimer () 
      if (this.timerId) 
        return
      
    
      this.timerId = setInterval(() => 
        this.active = (this.active + 1) % 4
      , 500)    
    ,
    
    stopTimer () 
      clearInterval(this.timerId)
      this.timerId = null
    
  
)

ul 
  border: 1px solid #777;
  margin: 0;
  padding: 0;


li 
  list-style: none;
  padding: 5px;


.active 
  background: #ccf;

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <ul>
    <li
      v-for="(item, index) in items"
      :key="item"
      :class=" active: active === index "
      @mouseenter="onMouseEnter(index)"
      @mouseleave="onMouseLeave"
    >
       item 
    </li>
  </ul>
</div>