How to make shared transition animation from ViewPager to another Fragment?

Question

I have the next situation. Activity[FragmentWithPager[PageWithGrid]] and I want to make trandition animation from list item to DetailFragment but I don't know wnat I do wrong. I have added the same transitionName to views in list item and fragment detail layouts and try to make transition animatiot with the code below.

val fragmentTransaction = supportFragmentManager.beginTransaction()
transitionItems.forEach { view ->
    fragmentTransaction.addSharedElement(view, view.transitionName)
}

val fragment = DetailFragment()
val transitionSet = TransitionSet().apply {
     addTransition(ChangeTransform())
     addTransition(ChangeClipBounds())
     addTransition(ChangeBounds())
}
fragment.sharedElementEnterTransition = transitionSet
fragment.sharedElementReturnTransition = transitionSet

fragmentTransaction.replace(R.id.root, fragment)
fragmentTransaction.addToBackStack(null)
fragmentTransaction.commit()

Answer 1

I found what I did wrong. Transition name must be unique for each item in list and page if you switch fragment with pager. Animation began to work when I have added page and list index to each transition name.

example project