一組元素實現(xiàn)添加過渡動畫

為單個元素添加過渡動畫時,我們需要用<transition>把元素包裹起來汰规,在為一組元素添加過渡動畫的時候波附,我們需要用<transitionGroup>來把一組元素包裹起來

例:

<!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">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    li {
      border: 1px dashed #999;
      margin: 5px;
      line-height: 35px;
      padding-left: 5px;
      font-size: 12px;
      width: 100%;
    }

    li:hover {
      background-color: hotpink;
      transition: all 0.8s ease;
    }



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

    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }

    /* 下面的 .v-move 和 .v-leave-active 配合使用杂曲,能夠?qū)崿F(xiàn)列表后續(xù)的元素诈火,漸漸地漂上來的效果 */
    .v-move {
      transition: all 0.6s ease;
    }
    .v-leave-active{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="app">

    <div>
      <label>
        Id:
        <input type="text" v-model="id">
      </label>

      <label>
        Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- <ul> -->
      <!-- 在實現(xiàn)列表過渡的時候兽赁,如果需要過渡的元素,是通過 v-for 循環(huán)渲染出來的柄瑰,不能使用 transition 包裹,需要使用 transitionGroup -->
      <!-- 如果要為 v-for 循環(huán)創(chuàng)建的元素設(shè)置動畫剪况,必須為每一個 元素 設(shè)置 :key 屬性 -->
      <!-- 給 ransition-group 添加 appear 屬性教沾,實現(xiàn)頁面剛展示出來時候,入場時候的效果 -->
      <!-- 通過 為 transition-group 元素译断,設(shè)置 tag 屬性授翻,指定 transition-group 渲染為指定的元素,如果不指定 tag 屬性孙咪,默認堪唐,渲染為 span 標簽 -->
      <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>
    <!-- </ul> -->

  </div>

  <script>
    // 創(chuàng)建 Vue 實例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '趙高' },
          { id: 2, name: '秦檜' },
          { id: 3, name: '嚴嵩' },
          { id: 4, name: '魏忠賢' }
        ]
      },
      methods: {
        add() {
          this.list.push({ id: this.id, name: this.name })
          this.id = this.name = ''
        },
        del(i) {
          this.list.splice(i, 1)
        }
      }
    });
  </script>
</body>

</html>

注意:我們在刪除動畫的時候翎蹈,下面的元素會等待被刪除的元素淮菠,然后立即跳到上面,這種效果不好荤堪,可以添加下面的兩個類來解決

    /* 下面的 .v-move 和 .v-leave-active 配合使用合陵,能夠?qū)崿F(xiàn)列表后續(xù)的元素,漸漸地漂上來的效果 */
    .v-move {
      transition: all 0.6s ease;
    }
    .v-leave-active{
      position: absolute;
    }

還要注意一點:元素必須給定寬度澄阳,不然absolute之后拥知,元素會只顯示內(nèi)容部分的寬度

transitionGroup標簽身上有兩個屬性,一個是appear屬性碎赢,作用是為一組元素添加入場動畫低剔,還有一個是tag屬性,可以將transitionGroup標簽渲染為其他的標簽肮塞,如果沒有設(shè)置tag屬性襟齿,此時,transitionGroup將默認被渲染為span標簽

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末枕赵,一起剝皮案震驚了整個濱河市蕊唐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌烁设,老刑警劉巖替梨,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钓试,死亡現(xiàn)場離奇詭異,居然都是意外死亡副瀑,警方通過查閱死者的電腦和手機弓熏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來糠睡,“玉大人挽鞠,你說我怎么就攤上這事”房祝” “怎么了信认?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長均抽。 經(jīng)常有香客問我嫁赏,道長,這世上最難降的妖魔是什么油挥? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任潦蝇,我火速辦了婚禮,結(jié)果婚禮上深寥,老公的妹妹穿的比我還像新娘攘乒。我一直安慰自己,他們只是感情好惋鹅,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布则酝。 她就那樣靜靜地躺著,像睡著了一般闰集。 火紅的嫁衣襯著肌膚如雪堤魁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天返十,我揣著相機與錄音妥泉,去河邊找鬼。 笑死洞坑,一個胖子當著我的面吹牛盲链,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播迟杂,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼刽沾,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了排拷?” 一聲冷哼從身側(cè)響起侧漓,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎监氢,沒想到半個月后布蔗,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體藤违,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年纵揍,在試婚紗的時候發(fā)現(xiàn)自己被綠了顿乒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡泽谨,死狀恐怖璧榄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吧雹,我是刑警寧澤骨杂,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站雄卷,受9級特大地震影響搓蚪,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜龙亲,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一陕凹、第九天 我趴在偏房一處隱蔽的房頂上張望悍抑。 院中可真熱鬧鳄炉,春花似錦、人聲如沸搜骡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽记靡。三九已至谈竿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間摸吠,已是汗流浹背空凸。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留寸痢,地道東北人呀洲。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像啼止,于是被迫代替她去往敵國和親道逗。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 概述 在網(wǎng)易云課堂學習李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺開發(fā)》時献烦,所整理的筆記滓窍。筆記內(nèi)容為根據(jù)個人需求所...
    墨荀閱讀 2,344評論 0 7
  • 翻譯自“View Controller Programming Guide for iOS”。 1 彈出視圖控制器...
    lakerszhy閱讀 3,548評論 2 20
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫巩那,核心動畫吏夯,幀動畫此蜈,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,114評論 1 23
  • 洛瑾希閱讀 264評論 0 1
  • 杭州的河東路上,有一家梁大媽媽菜館杠园。上下層兩片兒的門面店顾瞪,簡陋的裝修散發(fā)著屌絲的氣息。但老杭州人都知道抛蚁,這家...
    云破天開閱讀 941評論 0 1