如何使用vue的transition完成滑動過渡-js教程-PHP中文網

首頁

web前端

js教程

如何使用vue的transition完成滑動過渡

不言

Jun 26, 2018 am 09:38 AM

vue

這篇文章主要介紹了使用vue的transition完成滑動過渡的範例程式碼，小編覺得挺好的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

使用vue來做一些小巧的動畫效果是非常方便的，今天本人想使用vue的transition來完成一個滑動過渡效果，這裡和大家分享一下。

直接上原始碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue滑动效果</title>
  <style>
    .d {
      position: absolute;
      border: 1px solid red;
      width: 30px;
      height: 30px;
    }
    @keyframes show {
      0% {
        opacity: 0;
        left: 32px;
      }
      100% {
        opacity: 1;
        left: 0;
      }
    }
    @keyframes hide {
      0% {
        opacity: 1;
        left: 0;
      }
      100% {
        opacity: 0;
        left: -32px;
      }
    }
    .show-enter-active {
      animation: show 1.2s;
    }
    .show-leave-active {
      animation: hide 1.2s;
    }
    .show-enter, .show-leave-to {
      opacity: 0;
    }
    .wrap {
      position: relative;
      width: 32px;
      height: 32px;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <p>{{ message }}</p>
  <p class="wrap">
    <transition name="show">
      <p class="d" v-for="item in list" :key="item.id" v-if="count === item.id">
        {{ item.text }}
      </p>
    </transition>
  </p>
  <button @click="add">add</button>
</p>

<script>
  new Vue({
    el: &#39;#app&#39;,
    data () {
      return {
        message: &#39;Hello Vue.js!&#39;,
        count: 0,
        list: [
          {id: 0, text: &#39;aaa&#39;},
          {id: 1, text: &#39;bbb&#39;},
          {id: 2, text: &#39;ccc&#39;}
        ]
      }
    },
    methods: {
      add: function () {
        if (this.count < this.list.length - 1) {
          this.count += 1;
        } else {
          this.count = 0;
        }
      }
    }
  })
</script>
</body>
</html>

登入後複製

#這裡要注意的是父級使用relative，子級使用absolute進行定位，利用left值來進行位置的控制移動。這裡如果使用transform的話，由於之前的p有一個漸變的消失過程，這個過程中他的位置一直有存在，造成了後面的p無法正確移動到對應位置，所以使用absolute更好。

實在不行可以使用transition的mode屬性，設定成out-in，先讓前者完成動畫，讓佔據的位置完全消失，使得下一個p可以正常運動，不過這種方式只能先後完成動畫，不能同時完成動畫。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1322

PHP教程

1270

C# 教程

1250

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue中的watch怎麼用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。

vue返回上一頁的方法 Apr 07, 2025 pm 11:30 PM

Vue.js 返回上一頁有四種方法：$router.go(-1)$router.back()使用 <router-link to="/"> 組件window.history.back()，方法選擇取決於場景。

vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。

React與Vue：Netflix使用哪個框架？ Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVuedIrectly.1）TeamSperience：selectBasedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects：reactforforforproproject，reactforforforcompleplexones.3）cocatizationneedneeds：reactoffipicatizationneedneedneedneedneedneeds：reactoffersizationneedneedneedneedneeds：reactoffersizatization needefersmoreflexibleise.4）