原本的代码：

supportFragmentManager.beginTransaction()
    .replace(R.id.home_content, fragment)
    .addToBackStack(tag)
    .commit()

于是我查找了过渡的API然后添加一些共享元素，在这种情况下，共享元素是包含海报的方形图像。

supportFragmentManager.beginTransaction()
    .replace(R.id.home_content, fragment)
    .addToBackStack(tag)
    .apply{
        for (view in sharedElementViews){
            addSharedElement(view)
        }
    }

然后在进入的fragment上设置一个共享元素转换，在这个示例中，我使用了 ChangedBounds，因为view只是从A点移动到B点并改变大小。

class GridFragment : Fragment() {
  override fun onCreate(savedInstanceState: Bundle?){
    super.onCreate(savedInstanceState)
    sharedElementEnterTransition = ChangeBounds()
  }
}

上面的示例在进入时根本不起作用，但在返回过渡时工作的很好，这只是一个开始。

推迟

推迟转换直到view准备好(布局，数据加载等)。

因此在上面的代码中加入推迟的代码

override fun onViewCreated(view: View, icicle: Bundle?) {
  // View is created so postpone the transition for now
  postponeEnterTransition()

  viewModel.liveList.observe(this) {
    controller.setList(it)
    // Data is loaded so we’re ready to start our transition
    startPostponedEnterTransition()
  }
}

我们必须为进入和退出fragment都要设置此操作，以便进入和退出都能按预期进行。

重新排序

必须启用fragment事务中的重新排序才能使延迟的fragment过渡生效。

supportFragmentManager.beginTransaction()
    .setReorderingAllowed(true)
    .replace(R.id.home_content, fragment)
    .addToBackStack(tag)
    .apply{
      for (view in sharedElementViews){
        addSharedElement(view)
      }
    }
    .commit()

等待你的父布局

override fun onViewCreated(view: View, icicle: Bundle?){
  postponeEnterTransition()
  
  viewModel.liveList.observe(this) {
    controller.setList(this)
    (view?.parent as? ViewGroup)?.doOnPreDraw {
      startPostponedEnterTransition()
    }
  }
}