javascript - Vue为每个项目向下滑动过渡

标签 javascript vue.js vuejs3 vue-transitions

我正在学习过渡如何与 vue 一起工作。我有一个价格估算，当点击每个选项卡时，它会显示每件商品的估算价格。我想要当项目出现时，有一个向下滑动的效果。我试图找出方法，并通过Enter / Leave & List Transitions找到了方法。 .而且我也试着做出来了，但是效果还是不行。谁能帮我解决这个问题？

我在 Codesandbox 中的完整代码 => https://codesandbox.io/s/suspicious-almeida-rjyy9

PriceEstimation.vue

<template>
  <div class="card">
    <div class="card-header">Price Estimation</div>
    <div class="card-body px-0 pt-0">
      <transition name="slide">
        <div class="estimation-category" v-if="cart.total || isDropped">
          <div v-if="cart.storage && cart.storage.totalCost">
            <div class="bg-secondary d-flex justify-content-between p-2">
              <h5 class="text-white m-0">Storage</h5>
              <div>
                <span class="fas fa-pen text-success mr-2" @click="setTab('storage-calculator')"></span>
                <span class="fas fa-trash-alt text-danger" @click="deleteStorage()"></span>
              </div>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Server Name</span>
                <span class="ml-2">{{ cart.storage.serverName }}</span>
              </div>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Specification</span>
                <span class="ml-2">{{ cart.storage.specification.name }}</span>
              </div>
              <span>${{ cart.storage.specification.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Components</span>
              </div>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">vCPU</span>
                <span class="ml-2">{{ cart.storage.cpu.qty }} GHz</span>
              </div>
              <span>${{ cart.storage.cpu.value * cart.storage.cpu.qty }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">vRAM</span>
                <span class="ml-2">{{ cart.storage.ram.qty }} Gb</span>
              </div>
              <span>${{ cart.storage.ram.value * cart.storage.ram.qty }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Capacity</span>
                <span class="ml-2">{{ cart.storage.capacity.qty }}</span>
              </div>
              <span>${{ cart.storage.capacity.value * cart.storage.capacity.qty }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Server Qty</span>
                <span class="ml-2">{{ cart.storage.server.qty }}</span>
              </div>
              <span>${{ cart.storage.server.value * cart.storage.server.qty }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Storage Type</span>
                <span class="ml-2">{{ cart.storage.storageType.name }}</span>
              </div>
              <span>${{ cart.storage.storageType.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">OS</span>
                <span class="ml-2">{{ cart.storage.os.name }}</span>
              </div>
              <span>${{ cart.storage.os.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Database</span>
                <span class="ml-2">{{ cart.storage.database.name }}</span>
              </div>
              <span>${{ cart.storage.database.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Firewall</span>
                <span class="ml-2">{{ cart.storage.firewall.name }}</span>
              </div>
              <span>${{ cart.storage.firewall.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Estimate Cost</span>
              </div>
              <span>${{ cart.storage.totalCost }}</span>
            </div>
          </div>
          <div v-if="cart.service && cart.service.totalCost">
            <div class="bg-secondary d-flex justify-content-between p-2">
              <h5 class="text-white m-0">Service</h5>
              <div>
                <span class="fas fa-pen text-success mr-2" @click="setTab('service-calculator')"></span>
                <span class="fas fa-trash-alt text-danger" @click="deleteService"></span>
              </div>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Sub-service</span>
                <span class="ml-2">{{ cart.service.service.name }}</span>
              </div>
              <span>${{ cart.service.service.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Package-type</span>
                <span class="ml-2">{{ cart.service.package.name }}</span>
              </div>
              <span >${{ cart.service.package.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Estimate Cost</span>
              </div>
              <span>${{ cart.service.totalCost }}</span>
            </div>
          </div>
          <div v-if="cart.deploy && cart.deploy.totalCost">
            <div class="estimation-category__title">
              <h5 class="m-0 font-size-18 txt-secondary">Cloud Safe</h5>
              <div>
                  <a href="" @click.prevent="setTab('deploy-cloud')"><span class="fas fa-pen text-success font-size-15 mr-2"></span></a>
                  <a href="" @click.prevent="deleteDeploy()"><span class="fas fa-trash-alt text-danger font-size-15"></span></a>
              </div>
            </div>
            <div class="estimation-category__item">
              <div class="font-size-14 txt-primary">
                <span class="txt-bold">CPU: </span>
                <span class="">{{ cart.deploy.cpuDeploy.name }}</span>
              </div>
              <span class="font-size-14 txt-secondary">${{ cart.deploy.cpuDeploy.value }}</span>
            </div>
            <div class="estimation-category__item">
              <div class="font-size-14 txt-primary">
                <span class="txt-bold">RAM: </span>
                <span class="">{{ cart.deploy.ramDeploy.name }}</span>
              </div>
              <span class="font-size-14 txt-secondary">${{ cart.deploy.ramDeploy.value }}</span>
            </div>
            <div class="estimation-category__item">
              <div class="font-size-14 txt-primary">
                <span class="txt-bold">Persistant Volume: </span>
                <span class="">{{ cart.deploy.persistant.name }}</span>
              </div>
              <span class="font-size-14 txt-secondary">${{ cart.deploy.persistant.value }}</span>
            </div>
            <div class="estimation-category__item">
              <div class="font-size-14 txt-primary">
                <span class="txt-bold">Storage Type: </span>
                <span class="">{{ cart.deploy.workerQty.name }}</span>
              </div>
              <span class="font-size-14 txt-secondary">${{ cart.deploy.workerQty.value }}</span>
            </div>
            <div class="estimation-category__item">
                <div class="border-cost">
                  <div class="txt-primary">
                      <span class="txt-bold font-size-16">Estimate Cost</span>
                  </div>
                  <span class="font-size-16 txt-secondary">${{ cart.deploy.totalCost }}</span>
              </div>
            </div>
          </div>
          <table class="table table-borderless">
            <tbody>
              <tr>
                <td>
                  <p>TOTAL</p>
                </td>
                <td class="text-right">
                  <p>${{ cart.total }}</p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    setTab: {type: Function},
  },
  data: () => ({
    isDropped: false
  }),
  computed: {
    cart () {
      this.isDropped = !this.isDropped;
      return this.$store.getters.getCart;
    }
  },
  methods: {
    deleteStorage() {
      this.$store.commit('deleteStorage');
    },
    deleteService() {
      this.$store.commit('deleteService');
    },
    deleteDeploy() {
      this.$store.commit('deleteDeploy');
    }
  },
};
</script>

CSS

.slide-enter, .slide-leave-to{
  transform: scaleY(0);
}
.estimation-category{
  transform-origin: top;
  transition: transform .4s ease-in-out;
  overflow: hidden;
}

最佳答案

在 Vue 3 中，为了保持一致，过渡类名称略有更改。阅读docs here .

简而言之，两种转换类型(leave 和enter)现在都从{name}-{type}-from 开始, 结束于 {name}-{type}-to并且有{name}-{type}-active在转换处于事件状态时应用。

enter image description here

这意味着您必须替换 .slide-enter与 .slide-enter-from (slide-enter 不再适用于 Vue 3)。例如:

.slide-enter-from,
.slide-leave-to {
  transform: scaleY(0);
}
.estimation-category {
  transform-origin: top;
  transition: transform .4s ease-in-out;
}

查看working here .

它修复了一个转换。
如果你想为每个购物车项目单独转换，你可能需要使用 <transition-group>而不是 <transition>并运行 v-for在 cartItems 上数组，但动画几乎相同。
这是一个最小的例子:

const Cart = {
  data: () => ({
    items: []
  }),
  methods: {
    addItem() {
      const lastItemId = this.items.length
        ? this.items[this.items.length - 1].id 
        : -1;
      this.items.push({id: lastItemId + 1, name: `item-${lastItemId + 1}`})
    },
    removeItem(item) {
      this.items = this.items.filter(el => el.id !== item.id)
    }
  }
}

Vue.createApp(Cart).mount('#cart')
.cart-item-wrapper {
  max-height: 53px;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), margin-bottom .35s cubic-bezier(.4,0,.2,1);
  margin-bottom: .5rem;
  background-color: #fff;
  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%);
  overflow: hidden;
}
.slide-enter-from,
.slide-leave-to {
  max-height: 0;
  margin-bottom: 0;
}
.cart-item {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
.cart-item button {
  margin-left: 1rem;
}
#cart {
  max-width: 360px;
}
button {
  cursor: pointer;
}
body {
  background-color: #f5f5f5;
}
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="cart">
  <transition-group name="slide">
    <div class="cart-item-wrapper"
         :key="item.id"
         v-for="(item, key) in items">
      <div class="cart-item">
        {{ item.name }}
        <button @click="removeItem(item)">X</button>
      </div>
    </div>
  </transition-group>
  <button @click="addItem">Add Item</button>
</div>

在上面<transition-group>例如，我使用了与您不同的过渡，但这无关紧要。类名是重要的一点，事实上项目是由 id 键入的, 因此离开转换被正确映射(例如，如果我们使用它们在数组中的索引作为键，离开转换将始终发生在最后一个元素上)。

关于javascript - Vue为每个项目向下滑动过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67455461/

上一篇：sql - 在学生表中查找缺失值

下一篇：android - 无法从 api 获取数据，Future 总是返回 null - flutter

相关文章：

javascript - 如何从 Composition API 中的 Axios Response 返回变量到根级别？

javascript - tinymce 获取删除图片的详细信息

通过 jQuery 的 load() 方法加载整个页面时，JavaScript 不会在 Safari 中执行

javascript - v-toolbar-title 中的字体大小未更新

vue.js - 如何使用 Prettier 禁用元素标签中的属性中断

laravel - Vuex 无法使用 npm 安装并给出错误

typescript - 你如何推断​​ Vue 3 组件中的 Prop 类型？

javascript - 如何在 Vue 路由器中为除默认语言环境之外的所有语言环境添加 i18n 语言环境前缀？

javascript - 在 JavaScript 中，如果带有多个或的 if 在继续之前会评估所有语句吗？

javascript - Vue md-input with Vuex 仅在一个方向上更新

©2024 IT工具网  联系我们