transition

# transition

transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性 (en-US)。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

Chrome	Edge	Firefox	Opera	Safari	IE
√（ 26 ）	√（ 12 ）	√（ 16 ）	√（ 12.1 ）	√（ 9 ）	√（ 10 ）

# 语法

transition: <single-transition>#;

# transition 的属性值

名称

兼容性

描述

all

每一个能够进行过渡动画的属性都会进行过渡动画。

none

没有属性会进行过渡动画。

# App平台

从 HBuilderX4.11 版起，默认值调整为all。HBuilderX4.11 以下版本，默认值为none。

transition暂不支持结束属性值为百分比。

# 示例

hello uni-app x

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view class="container">
      <text class="text">点击修改宽度</text>
      <view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
    </view>
    <view class="container">
      <text class="text">点击修改宽度(递增)</text>
      <view class="width-progress transition-width" id="widthProgress" @click="changeWidthProgress"></view>
    </view>
    <view class="container">
      <text class="text">点击修改Margin</text>
      <view class="base-style transition-margin" id="styleMargin" @click="changeMargin"></view>
    </view>
    <view class="container">
      <text class="text">点击修改Padding</text>
      <view class="base-style transition-padding" id="stylePadding" @click="changePadding">
        <view style="background-color: black; height: 50px; width: 50px"></view>
      </view>
    </view>
    <view class="container">
      <text class="text">点击修改background-color和opacity</text>
      <view class="base-style transition-background" id="styleBackground" @click="changeBackground"></view>
    </view>
    <view class="container">
      <text class="text">点击修改background-color（rgba）</text>
      <view style="flex: 1;">
        <view class="base-style transition-background" id="styleBackground2" @click="changeBackground2"></view>
      </view>
    </view>
    <view class="container">
      <text class="text">点击修改opacity渐隐渐现</text>
      <view class="base-style transition-opacity" id="styleOpacity" @click="changeStyleOpacity"></view>
    </view>
    <view class="container">
      <text class="text">动态修改background-color和duration</text>
      <view class="base-style" id="propertyStyleBackground" @click="propertyChangeBackground"></view>
    </view>
    <view class="container">
      <text class="text">点击修改Transform</text>
      <view class="base-style transition-transform" id="styleTransform" @click="changeTransform"></view>
    </view>
    <view class="container">
      <text class="text">点击修改TransformTranslate</text>
      <view class="base-style transition-transform" id="transformTranslate" @click="changeTransformTranslate"></view>
    </view>
    <view class="container">
      <text class="text">点击修改Transform和宽</text>
      <view class="base-style transition-transform-width" id="styleTransformWithWidth"
        @click="changeTransformWithWidth"></view>
    </view>
    <view class="container" @click="changeTransformWithOrigin">
      <text class="text">点击修改Transform（含transform-origin）</text>
      <view class="base-style transition-transform" style="transform-origin: 0 0;" id="styleTransformWithOrigin"></view>
    </view>
    <view class="container">
      <text class="text">点击修改Border</text>
      <view class="base-style transition-border" id="styleBorder" @click="changeBorder"></view>
    </view>
    <view class="container">
      <text class="text">点击修改Position</text>
      <view class="base-style transition-position" id="stylePosition" @click="changestylePosition"></view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>



<style>
  .container {
    margin: 7px;
    background-color: white;
  }

  .text {
    margin-top: 10px;
    margin-bottom: 16px;
  }

  .base-style {
    width: 200px;
    height: 200px;
    background-color: brown;
  }

  .width-progress {
    width: 200px;
    height: 200px;
    background-color: brown;
  }

  .transform-bgColor {
    transition-property: background-color;
    transition-duration: 0.5s;
  }

  .transition-width {
    transition-property: width;
    transition-duration: 1s;
  }

  .transition-margin {
    transition-property: margin-left, margin-top;
    transition-duration: 1s;
  }

  .transition-padding {
    transition-property: padding-left, padding-top;
    transition-duration: 1s;
  }

  .transition-background {
    transition-property: background-color, opacity;
    transition-duration: 1s;
  }

  .transition-opacity {
    transition-property: opacity;
    transition-duration: 1s;
  }

  .transition-transform {
    transition-property: transform;
    transition-duration: 1s;
  }

  .transition-border {
    border-width: 5px;
    border-color: brown;
    border-style: solid;
    transition-property: border-color;
    transition-duration: 1s;
  }

  .transition-position {
    left: 0px;
    transition-property: left;
    transition-duration: 1s;
  }

  .transition-transform-width {
    transition-property: transform, width;
    transition-duration: 1s;
  }
</style>