# ChangeSizeConfig

Artifact: [androidx.compose.animation:animation](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/EnterExitTransition.kt+class:androidx.compose.animation.ChangeSizeConfig) Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.13.0-rc01) Common/AllAndroid/JVM
- Cmn

  ```
  class ChangeSizeConfig
  ```

*** ** * ** ***

Configuration parameters for the size change (expand/shrink) effect of an `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`.

```kotlin
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.ColorMatrix
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp

var visible by remember { mutableStateOf(true) }

// A custom transition container that uses enter/exit transition configurations to build custom
// transition behavior.
@Composable
fun customTransitionBox(
    enter: EnterTransition,
    exit: ExitTransition,
    content: @Composable () -> Unit,
) {
    val transition = updateTransition(visible, label = "CustomTransitionBox")

    // Use the fade config to animate alpha
    val fadeConfig = if (transition.targetState) enter.config.fade else exit.config.fade

    val alpha by
        transition.animateFloat(
            transitionSpec = { fadeConfig?.animationSpec ?: tween() },
            label = "alpha",
        ) { state ->
            if (state) 1f else fadeConfig?.alpha ?: 0f
        }

    Box(
        modifier =
            Modifier.graphicsLayer { this.alpha = alpha }
                .drawWithContent {
                    // Apply custom saturation fade using alpha
                    val matrix = ColorMatrix().apply { setToSaturation(alpha) }
                    drawIntoCanvas { canvas ->
                        val paint =
                            Paint().apply { colorFilter = ColorFilter.colorMatrix(matrix) }
                        canvas.saveLayer(Rect(Offset.Zero, size), paint)
                        drawContent()
                        canvas.restore()
                    }
                }
    ) {
        content()
    }
}

Column {
    Button(onClick = { visible = !visible }) { Text("Toggle visibility") }

    customTransitionBox(
        fadeIn(animationSpec = tween(durationMillis = 1000), initialAlpha = 0f),
        fadeOut(animationSpec = tween(durationMillis = 1000), targetAlpha = 0f),
    ) {
        Box(Modifier.size(200.dp).background(Color.Blue))
    }
}
```

## Summary

| ### Public functions |
|---|---|---|
| `open operator https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ChangeSizeConfig#equals(kotlin.Any)(other: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?)` | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ChangeSizeConfig#hashCode()()` | Cmn |
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ChangeSizeConfig#toString()()` | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ChangeSizeConfig#alignment()` The `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` used to align the content inside the changing boundary. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize>` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ChangeSizeConfig#animationSpec()` The `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` used for the size animation. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ChangeSizeConfig#clip()` If true, the content will be clipped to the animated size boundary. | Cmn |
| `(fullSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntSize` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/ChangeSizeConfig#size()` Lambda that calculates the initial size for EnterTransition, or target size for ExitTransition based on the full container size. | Cmn |

## Public functions

### equals

Cmn

```
open operator fun equals(other: Any?): Boolean
```

### hashCode

Cmn

```
open fun hashCode(): Int
```

### toString

Cmn

```
open fun toString(): String
```

## Public properties

### alignment

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.13.0-rc01)

```
val alignment: Alignment
```

The `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` used to align the content inside the changing boundary.

### animationSpec

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.13.0-rc01)

```
val animationSpec: FiniteAnimationSpec<IntSize>
```

The `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` used for the size animation.

### clip

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.13.0-rc01)

```
val clip: Boolean
```

If true, the content will be clipped to the animated size boundary.

### size

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.13.0-rc01)

```
val size: (fullSize: IntSize) -> IntSize
```

Lambda that calculates the initial size for EnterTransition, or target size for ExitTransition based on the full container size.