Vue 组件 - transition

于 2025-04-09 11:06:37 发布
阅读量832 收藏 10
点赞数 20
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/json_ligege/article/details/147086134

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - 过渡transition

目录

过渡transition

过渡效果

设置样式

页面及样式绑定

简写方式

开始动画

多个元素过渡

过渡中的diff算法

Mode

多个组件过渡

再绑定mode

多个列表过渡

可复用过渡

修改抽屉示例

设置为组件

直接使用组件

传值与接收值

总结

过渡transition

过渡效果

对组件显示增加过渡效果。

设置样式

需要自己定义切换样式定义类。

示例如下：

/* 进场动画 */
.kai-enter-active {
    animation: aaa 1.5s;
}
/* 出场动画 */
.kai-leave-active {
    animation: aaa 1.5s reverse;
}

@keyframes aaa {
    0% {
        opacity:0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

执行0%-100%慢慢过渡的效果。

页面及样式绑定

开始绑定，使用transition标签包含后，设置其上的，通过isShow属性改变 触发。

示例如下：

<div id="box">
    <button @click="isShow = !isShow">change</button>
    <transition enter-active-class="kai-enter-active" leave-active-class="kai-leave-active">
        <div v-show="isShow">面朝大海 春暖花开</div>
    </transition>
</div>
<script>
    let vm = new Vue({
        el:"#box",
        data:{
            isShow:false
        }
    })
</script>

简写方式

通过设置前缀，寻找固定前缀相应类名。

示例如下：

<transition name="kai">
    <div v-show="isShow">从明天起 做一个幸福的人</div>
</transition>

开始动画

如果想让开始时就显示动画，而非点击后显示动画，需要设置appear属性。

示例如下：

<div id="box">
    ......
    <transition name="kai" appear>
        <div v-show="isShow">从明天起 做一个幸福的人</div>
    </transition>
</div>
<script>
    let vm = new Vue({
        el:"#box",
        data:{
            isShow:true
        }
    })
</script>

多个元素过渡

包含多个元素，但只能同时存在一个。

示例如下：

<transition name="kai" appear>
    <div v-if="isShow">喂马 劈柴 周游世界</div>
    <div v-else>从明天起 关心粮食和蔬菜</div>
</transition>

过渡中的diff算法

多个元素过渡（设置key）

当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们，否则Vue为了效率只会替换相同标签内部的内容。

有key，效果会变为两者切换中有交互的效果。

示例如下：

<div id="box">
    <button @click="isShow = !isShow">change</button>
    <transition name="kai">
        <div v-if="isShow" key="1">喂马 劈柴 周游世界</div>
        <div v-else key="2">从明天起 关心粮食和蔬菜</div>
    </transition>
</div>

或者不设置key，如果使用的标签不同，也不会复用。

示例如下：

<transition name="kai">
    <div v-if="isShow">喂马 劈柴 周游世界</div>
    <p v-else>从明天起 关心粮食和蔬菜</p>
</transition>

就会呈现出，一个还未隐藏，另一个已经出现。

Mode

In-out 先来后走

Out-in 先走后来

示例如下：

<transition name="kai" mode="in-out">
    <div v-if="isShow" key="1">喂马 劈柴 周游世界</div>
    <div v-else key="2">从明天起 关心粮食和蔬菜</div>
</transition>

多个组件过渡

使用之前的component(动态组件的示例)，把过渡效果的类样式粘贴过来。

其他修改如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* 进场动画 */
    .kai-enter-active {
      animation: aaa 1.5s;
    }
    /* 出场动画 */
    .kai-leave-active {
      animation: aaa 1.5s reverse;
    }

    @keyframes aaa {
      0% {
        opacity:0;
        transform: translateX(100px);
      }

      100% {
        opacity: 1;
        transform: translateX(0px);
      }
    }

    * {
      margin:0px;
      padding:0px;
    }
    footer ul {
      margin-top:200px;
      float:left;
      background-color: #ccc;
      list-style: none;
    }
    footer ul li {
      width:100px;
      height: 20px;
      float:left;
      line-height: 20px;
      text-align: center;
    }
  </style>
  <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
  <keep-alive>
    <transition name="kai">
      <component :is="which"></component>
    </transition>
  </keep-alive>
  <footer>
    <ul>
      <li @click="which='home'">首页</li>
      <li @click="which='list'">列表</li>
      <li @click="which='shopcar'">购物车</li>
    </ul>
  </footer>
</div>
<script>
  Vue.component("home", {
    template:`
        <div>
            home
            <input type="text">
        </div>
        `
  })

  Vue.component("list", {
    template:`
        <div>
            list
        </div>
        `
  })

  Vue.component("shopcar", {
    template:`
        <div>
            shopcar
        </div>
        `
  })

  let vm = new Vue({
    el:"#box",
    data: {
      which:'home'
    }
  })
</script>
</body>
</html>

再绑定mode

再绑定效果。示例如下：

<keep-alive>
  <transition name="kai" mode="in-out">
    <component :is="which"></component>
  </transition>
</keep-alive>

多个列表过渡

对todolist示例进行修改。示例如下：

<div id="box">
    <input type="text" v-model="mytext"/>
    <button @click="handelAdd()">Add</button>
    <div v-show="!datalist.length">待办事项暂时没有了，快添加吧！</div>
    <ul v-show="datalist.length">
        <li v-for="(item, index) in datalist">
            {{item}}
            <button @click="handelDel(index)">Del</button>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#box", // element
        data:{
            mytext:'今日任务',
            datalist:["第一件事", "第二件事", "第三件事"]
        },
        methods:{
            handelAdd() {
                console.log('点击add按钮')
                this.datalist.push(this.mytext)
                // 置空mytext内容
                this.mytext = ''
            },
            handelDel(index) {
                this.datalist.splice(index, 1)
            }
        }
    })
</script>

把过渡效果样式粘贴过来。示例如下：

<ul v-show="datalist.length">
  <transition-group name="kai">
    <li v-for="(item, index) in datalist" :key="item">
      {{item}} -- {{index}}
      <button @click="handelDel(index)">Del</button>
    </li>
  </transition-group>
</ul>

Key需要设置唯一值，目前的key因为数据源，无法设置唯一key；

删除没有问题，新增会有问题。

可复用过渡

修改抽屉示例

复制过渡效果样式，然后使用组件-抽屉示例进行修改和演示。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 进场动画 */
        .kai-enter-active {
            animation: aaa 1.5s;
        }
        /* 出场动画 */
        .kai-leave-active {
            animation: aaa 1.5s reverse;
        }
        @keyframes aaa {
            0% {
                opacity:0;
                transform: translateX(-100%);
            }

            100% {
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="box">
    <navbar @myevent="handleEvent"></navbar>
    <transition name="kai">
        <sidebar v-show="isShow"></sidebar>
    </transition>
</div>
<script>
Vue.component("navbar", {
    template:`
        <div>
        navbar-<button @click="handleClick">click</button>
        </div>
    `,
    methods: {
        handleClick() {
            // 通知父组件 取反 isShow - 子传父 倚靠事件
            this.$emit("myevent")
        }
    }
})

let vm = new Vue({
    el:"#box",
    data: {
        isShow: false
    },
    methods: {
        handleEvent() {
            this.isShow = !this.isShow
        }
    }
})
</script>
</body>
</html>

设置为组件

设置列表sidebar为组件。示例如下：

Vue.component("sidebar", {
    template:`
        <transition name="kai">
            <ul style="background-color: yellow;width: 200px;height: 500px">
              <li>首页</li>
              <li>钱包</li>
              <li>设置</li>
            </ul>
        </transition>
    `,
    methods: {
        handleClick() {
            // 通知父组件 取反 isShow - 子传父 倚靠事件
            this.$emit("myevent")
        }
    }
})

直接使用组件

去掉过渡标签，直接使用组件渲染。

示例如下：

<div id="box">
    <navbar @myevent="handleEvent"></navbar>
    <sidebar v-show="isShow"></sidebar>
</div>

 

传值与接收值

把组件改为传值方式，这样可以在外部直接修改过渡效果。

示例如下：

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - 过渡transition

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JSON_L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值