transition.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <view class="container">
        <text class="text">点击修改宽度</text>
        <view
          class="base-style transition-width"
          :style="widthOrHeight"
          @click="changeWidthOrHeight"
        ></view>
      </view>
      <view class="container">
        <text class="text">点击修改Margin</text>
        <view
          class="base-style transition-margin"
          :style="styleMargin"
          @click="changeMargin"
        ></view>
      </view>
      <view class="container">
        <text class="text">点击修改Padding</text>
        <view
          class="base-style transition-padding"
          :style="stylePadding"
          @click="changePadding"
        >
          <view
            style="background-color: black; height: 50px; width: 50px"
          ></view>
        </view>
      </view>
      <view class="container">
        <text class="text">点击修改Background</text>
        <view
          class="base-style transition-background"
          :style="styleBackground"
          @click="changeBackground"
        ></view>
      </view>
      <view class="container">
        <text class="text">点击修改Transform</text>
        <view
          class="base-style transition-transform"
          :style="styleTransform"
          @click="changeTransform"
        ></view>
      </view>
      <view class="container">
        <text class="text">点击修改Border</text>
        <view
          class="base-style transition-border"
          :style="styleBorder"
          @click="changeBorder"
        ></view>
      </view>
      <view class="container">
        <text class="text">点击修改Position</text>
        <view
          class="base-style transition-position"
          :style="stylePosition"
          @click="changestylePosition"
        ></view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
export default {
  data() {
    return {
      isTranstionWidthOrHeight: false,
      widthOrHeight: '',
      isTranstionChangeMargin: false,
      styleMargin: '',
      isTransitionStylePadding: false,
      stylePadding: '',
      isTransitionstyleBackground: false,
      styleBackground: '',
      isTransitionStyleTransform: false,
      styleTransform: '',
      isTransitionstyleBorder: false,
      styleBorder: '',
      isTransitionstylePosition: false,
      stylePosition: '',
    }
  },
  methods: {
    changeWidthOrHeight() {
      this.widthOrHeight = this.isTranstionWidthOrHeight
        ? 'width:400rpx'
        : 'width:600rpx'
      this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
    },
    changeMargin() {
      this.styleMargin = this.isTranstionChangeMargin
        ? 'margin-top:0rpx;margin-left:0rpx'
        : 'margin-top:100rpx;margin-left:100rpx'
      this.isTranstionChangeMargin = !this.isTranstionChangeMargin
    },

    changePadding() {
      this.stylePadding = this.isTransitionStylePadding
        ? 'padding-top:0rpx;padding-left:0rpx'
        : 'padding-top:100rpx;padding-left:100rpx'
      this.isTransitionStylePadding = !this.isTransitionStylePadding
    },
    changeBackground() {
      this.styleBackground = this.isTransitionstyleBackground
        ? 'background-color: brown;opacity:1'
        : 'background-color: black;opacity:0.5'
      this.isTransitionstyleBackground = !this.isTransitionstyleBackground
    },
    changeTransform() {
      this.styleTransform = this.isTransitionStyleTransform
        ? 'transform: rotate(0deg)'
        : 'transform: rotate(135deg)'
      this.isTransitionStyleTransform = !this.isTransitionStyleTransform
    },
    changeBorder() {
      this.styleBorder = this.isTransitionstyleBorder
        ? 'border-color: brown;'
        : 'border-color: yellow;'
      this.isTransitionstyleBorder = !this.isTransitionstyleBorder
    },
    changestylePosition() {
      this.stylePosition = this.isTransitionstylePosition
        ? 'left:0rpx'
        : 'left:150rpx;'
      this.isTransitionstylePosition = !this.isTransitionstylePosition
    },
  },
}
</script>

<style>
.container {
  margin: 15rpx;
  background-color: white;
}
.text {
  margin-top: 20rpx;
  margin-bottom: 32rpx;
}

.base-style {
  width: 400rpx;
  height: 400rpx;
  background-color: brown;
}

.transition-width {
  transition-property: width;
  transition-duration: 1000;
}

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

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

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

.transition-transform {
  transition-property: transform;
  transition-duration: 1000;
}

.transition-border {
  border-width: 5px;
  border-color: brown;
  transition-property: border-color;
  transition-duration: 1000;
}

.transition-position {
  transition-property: left;
  transition-duration: 1000;
}
</style>