Vue.js 列表動畫

時間 2019-11-26

原文原文鏈接

進入/離開 & 列表過渡

示例一：css

<style>
	/* 移動的時間 */
    .fade-enter-active{
      transition: all .3s ease;
    }
    /* 移動的方向，和過渡 */
    .fade-leave-active{
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    /* 開始和結束的狀態 */
    .fade-enter,.fade-leave-to{
      transform: translateX(10px);
      opacity: 0;
    }
  </style>

<body>
  <div id="main">
    <button v-on:click="ok = !ok">點擊</button>
    <transition name="fade">
      <p v-if="ok">俠課島-vue動畫課程</p>
    </transition>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#main',
    data: {
      ok: true
    }
  });
</script>

示例二：html

添加與刪除數字動畫修改vue

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>俠課島 vue-列表動畫</title>
  <script src="Vue.min.js"></script>
  <script src="js/lodash.min.js"></script>
  <style type="text/css">
    .list-item{
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid green;
      display: inline-block;
    }

    .list-enter-active,.list-leave-active{
      transition: all 1s;
    }
    .list-enter,.list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
  </style>
</head>

<body>
  <div id="main">
    <button v-on:click="add">添加數字</button>
    <button v-on:click="remove">刪除數字</button>
    <transition-group name="list">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#main',
    data: {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10
    },
    methods: {
      // 定義一個隨機添加的方法
      randomIndex: function() {
        return Math.floor(Math.random() * this.items.length)
      },
      // 添加數字方法
      add: function() {
        this.items.splice(this.randomIndex(), 0, this.nextNum++)
      },
      // 刪除數字方法
      remove: function() {
        this.items.splice(this.randomIndex(), 1)
      },
    }
  });
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。