Mobile: active,: hover cannot well trigger the animation solution,

Mobile: active,: hover cannot well trigger the animation solution,
Solution 1: Problem Environment:

CSS 3 is used to define an animation. The animation cannot be well animated on the mobile end when the hover pseudo class calls the animation.

2: solution:

Define an open class to trigger an animation when the open Class is met

Use js events to control the animation, add the open Class When sliding, and then remove the open Class at the same time as the animation.

In this way, the animation can be well controlled.

3: attached demo

<! DOCTYPE html>