Re: [csswg-drafts] [css-view-transitions-2] Proposal for a view-transition-tree property (name tbd) (#10334)

One thing I’m not entirely convinced of is the fact that the containers in the given example need to have a `view-transition-name` although these containers themselves don’t actually transition. Only reason to do this, is to enable clipping. Feels like a technicality that puts extra load on the author and also increases the number of captured elements.

Maybe there could be a way to mark element to become a “view transition container” that automatically clips its participating contents without the container itself moving around or stuff? I’m leaning towards CSS Containment for this.

- Example using keywords:

  - CSS:
  
    ```css
    .container {
      container-type: view-transitions; /* Capture my dimensions and use it to clip the VT snapshots contained */
    }
    
    .card {
      view-transition-name: auto;
      view-transition-container: nearest; /* default */
    }
    
    .card-switching-containers {
      view-transition-name: the-card;
      view-transition-container: none; /* render as direct child of the ::view-transition pseudo */
    }
    ```

  - Resulting Tree:
  
    ```
    ::view-transition
    |__ ::view-transition-group(root)
    |__ ::view-transition-container(container-1)
    |   |__ ::view-transition-group(card1)
    |   |__ ::view-transition-group(card2)
    |__ ::view-transition-container(container-2)
    |   |__ ::view-transition-group(card3)
    |   |__ ::view-transition-group(card4)
    |__ ::view-transition-group(the-card)
    ```

- Example using a named container:

  - CSS:

    ```css
    .container {
      container-type: view-transitions;
    }
    
    .containers-wrapper {
      container: containers-wrapper / view-transitions; /* Named container */
    }
    
    .card {
      view-transition-name: auto;
      view-transition-container: nearest; /* default */
    }
    
    .card-switching-containers {
      view-transition-name: the-card;
      view-transition-parent: containers-wrapper; /* render in the containers-wrapper pseudo */
    }
    ```

  - Resulting tree:
    
    ```
    ::view-transition
    |__ ::view-transition-group(root)
    |__ ::view-transition-container(container-wrapper)
        |__ ::view-transition-container(container-1)
        |   |__ ::view-transition-group(card1)
        |   |__ ::view-transition-group(card2)
        |__ ::view-transition-container(container-2)
        |   |__ ::view-transition-group(card3)
        |   |__ ::view-transition-group(card4)
        |__ ::view-transition-group(the-card)
    ```

Setting `container-type` to `view-transitions` basically does the `view-transition-tree: preserve` thing covered in this thread.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10334#issuecomment-2136991156 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 May 2024 09:42:51 UTC