vue动画-走马灯和列表增加删除元素

最新推荐文章于 2024-01-16 11:35:51 发布

原创最新推荐文章于 2024-01-16 11:35:51 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue效果

本文介绍如何在Vue项目中实现走马灯效果，并探讨在列表增删元素时如何添加平滑过渡动画，提升用户体验。通过Vue的transition组件和CSS动画，详细讲解了关键步骤和注意事项。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
  <title>Document</title>
</head>
<style>
  .box {
    margin: 100px;
    width: 100px;
    height: 150px;
    background-color: red;
  }

  .mymy-enter-to,
  .mymy-enter-leave-to {
    transform: translateX(100px)
  }

  .mymy-enter-active,
  .mymy-leave-active {
    transition: all 10s ease
  }

  li {
    width: 100px;
    height: 40px;
    border: red 1px dashed;
    margin: 10px;
  }

  li:hover {
    background-color: red;
    transition: all 1s ease-in;
  }

  .list-enter,
  .list-leave-to {
    opacity: 0;
    transition: translateY(80px);
  }

  .list-enter-active,
  .list-leave-active {
    transition: all 1s ease;

  }

  .v-move {
    transition: all 10s ease
  }

  .v-leave-active {
    position: absolute;
  }
</style>

<body>
  <div id="example-3">
    <h2>{{msg}}</h2>
    <input type="button" value="go" @click='myGo'>
    <input type="button" value="stop" @click='myStop'>
    <span>id:</span>
    <input type="text" v-model="id">
    <span>name:</span>
    <input type="text" v-model='name'>
    <input type="button" value="添加" @click='add'>

    <transition-group name='list' tag="ul" appear>
      <li v-for='(item,index) in list' :key='item.id' @click="del(index)">
        {{item.id}}--{{item.name}}
      </li>
    </transition-group>


  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#example-3',
    data: {
      msg: '1234567890',
      list: [{
          id: 0,
          name: 'ye0'
        },
        {
          id: 1,
          name: 'ye1'
        },
        {
          id: 2,
          name: 'ye2'
        },
        {
          id: 3,
          name: 'ye3'
        },
        {
          id: 4,
          name: 'ye4'
        }
      ],
      myInterval: null,//定时器
      id: '',
      name: ''
    },
    methods: {
      //走马灯效果开始
      myGo() {
        if (this.myInterval != null)//如果没有定时器就开始
          return
        this.myInterval = setInterval(() => {
          var starWord = this.msg.substring(0, 1);
          var otherWords = this.msg.substring(1); //除开头的字
          this.msg = otherWords + starWord;
        }, 300)
      },
      //走马灯效果结束
      myStop() {
        clearInterval(this.myInterval);
        this.myInterval = null  //将上一个定时器清除
      },
      add() {
        this.list.push({
          id: this.id,
          name: this.name
        })
      },
      del(index) {
        this.list.splice(index, 1)
      }
    },

  })
</script>

</html>