uni-app中css的transition不支持多个属性。

uni-app中css的transition不支持多个属性。

开发环境 版本号 项目创建方式
Mac 13.3.1
3.98
Android 14
Xiaomi

操作步骤：

如题

预期结果：

可以简写 transition

实际结果：

无效果

bug描述：

css 中 transition 简写多个属性时不生效, 如transition: width 0.2s, height: 0.3s; 但是写transition-property: width, height; 是可以的。


更多关于uni-app中css的transition不支持多个属性。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

目前除了transition-property之外，其他的transition属性暂不支持多个属性值。

更多关于uni-app中css的transition不支持多个属性。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，CSS 的 transition 属性是支持多个属性的。你可以通过逗号分隔来指定多个属性的过渡效果。以下是一个示例：

/* 在 uni-app 的样式文件中 */
.my-element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease;
}

.my-element:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

在这个例子中，width、height 和 background-color 三个属性都会在 0.5 秒内以 ease 的过渡效果进行变化。

注意事项

  1. 兼容性：transition 属性在现代浏览器中广泛支持，但在某些旧版浏览器中可能存在兼容性问题。如果你需要支持旧版浏览器，可能需要使用前缀或替代方案。

  2. 性能：过渡多个属性可能会影响性能，尤其是在移动设备上。确保过渡的属性不会导致页面卡顿。

  3. uni-app 的特定环境：uni-app 本身并不会限制 transition 的使用，但如果你在某些特定的平台（如小程序）上遇到问题，可能需要检查该平台的 CSS 支持情况。

示例代码

<template>
  <view class="my-element" [@click](/user/click)="toggleSize">
    点击我
  </view>
</template>

<script>
export default {
  methods: {
    toggleSize() {
      const element = document.querySelector('.my-element');
      element.classList.toggle('large');
    }
  }
}
</script>

<style>
.my-element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease;
}

.my-element.large {
  width: 200px;
  height: 200px;
  background-color: blue;
}
</style>
回到顶部