点击从一个div到另一个div创建幻灯片转换

Question

如何使用CSS进行此转换。

我在这里做类似https://codepen.io/anon/pen/BYYQOr的事情。

#container {
  width: 400px;
  position: relative;
}
#div1, #div2 {
  width: 200px;
  height:200px;
  float: left;
  background-color: red;
}

#div2 {
  position: absolute;
  width: 200px;
  height:200px;
  float: left;
  background-color: blue;
}


.show {
  -o-transition: opacity 3s;
  -moz-transition: opacity 3s;
  -webkit-transition: opacity 3s;
  transition: opacity 3s;
  opacity:1;
}
.hide{  opacity:0; right: -200px; }

如何轻松使用上述请帮助

Answer 1

使用transition-timing-function

public class ScheduleFragment extends Fragment {

private List<Schedules> mDataSet;
private TextView textViewList;
private RecyclerView recyclerView;
private FloatingActionButton fab;
private DatabaseReference databaseSchedule;
private SwipeRecyclerViewAdapter mAdapter;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    // ... your codes

    initScheduleView(view);

    databaseSchedule = FirebaseDatabase.getInstance().getReference("Sched");
    databaseSchedule.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {

            //clearing the previous artist list
            mDataSet.clear();

            //iterating through all the nodes
            for (DataSnapshot postSnapshot : dataSnapshot.getChildren()) {
                //getting artist
                Schedules schedules = postSnapshot.getValue(Schedules.class);
                //adding artist to the list
                mDataSet.add(schedules);
            }

            mAdapter.setList(mDataSet);

            if (mDataSet.isEmpty()) {
                recyclerView.setVisibility(View.INVISIBLE);
                textViewList.setVisibility(View.VISIBLE);
            } else {
                recyclerView.setVisibility(View.VISIBLE);
                textViewList.setVisibility(View.GONE);
            }
        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });

    return view;
}

private void initScheduleView(View view) {

    // ... your codes 

    mDataSet = new ArrayList<>();

    //creating adapter
    mAdapter = new SwipeRecyclerViewAdapter(getActivity(), mDataSet);
    mAdapter.setMode(Attributes.Mode.Single);
    recyclerView.setAdapter(mAdapter);

    // ... your codes 
}

private class SwipeRecyclerViewAdapter extends RecyclerSwipeAdapter<SwipeRecyclerViewAdapter.SimpleViewHolder> {

    private Context mContext;
    private List<Schedules> schedulesList;

    // ... your methods

    // modify your list object whenever you receive new data instead of calling new adapter
    public void setList(List<Schedules> list) {
        this.schedulesList.clear();
        this.schedulesList.addAll(list);
        notifyDataSetChanged();
    }

    // ... your methods
}
}