【css】落叶飘动效果，点击落叶飘动停止

做项目有个需求是要求做落叶下落效果，做了一下。整体是依靠css中animation属性来控制的，@keyframes move控制动画轨迹，使用伪元素checked控制动画运行和暂停。

css3文档中有这样的例子，利用伪元素checked控制动画效果的运行和暂停：跳转链接

这种动画实现效果是一个指定元素按照指定路线去进行来回往复线性运动，代码如下
（HTML部分）：

<input id="stop" type="radio" name="playAnimation"/>
<input id="play" type="radio" name="playAnimation"/>

<div class="box">
    <label for="stop">
        <div class="btn">stop</div>
    </label>
    <label for="play">
        <div class="btn">play</div>
    </label>
</div>

<div class="animation"></div>

（SCSS部分）

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

#stop:checked ~ .animation {
    animation-play-state: paused;
}
#play:checked ~ .animation {
    animation-play-state: running;
}

其实里面的核心代码主要就是animation动画效果、@keyframes move控制轨迹两者。
@keyframes move中0% 15% 85% 90% 100%…指的是在整段动画效果中，你的动画到达这个阶段的运动状态，比如0%就是动画未开始运行的初始状态、100%就是动画全部进行了完成结束后的状态。

三种控制动画暂停和启动方式hover、target、checked：
1.hover控制：

.stop:hover ~ .animation {
    animation-play-state: paused;
}

2.target控制

#stop:target ~ .animation {
    animation-play-state: paused;
}
#play:target ~ .animation {
    animation-play-state: running;
}

3.checked控制

#stop:checked ~ .animation {
    animation-play-state: paused;
}
#play:checked ~ .animation {
    animation-play-state: running;
}

以上的例子可以实现简单的元素下落效果，通过label的for绑定固定id来决定点击按钮是运行还是暂停，例子上是有两个按钮分别控制，但我自己的需求是要求点击滑动中的元素控制动画是否运行，所以需要改进一下。
我目前是用vue写的，所以进行了一下改造，通过一个button动态for绑定来判断是运行还是暂停，又因为需要点击单个元素，控制单个元素的动画效果，不能影响其他元素的动画，所以要加个id判断，具体实现代码如下（下方图片路径我是放在阿里oss上的，用vuex.store.state获取的前置路径，所以写的时候具体到底用什么路径具体看待）：

<template>
  <div>
    <input id="stop" type="radio" name="playAnimation"/>
    <input id="play" type="radio" name="playAnimation"/>

    <div v-for="(item, index) in chooseList" :key="index">
      <div :class="!clickList.includes(index+1)?'animation':'animation1'"
           :style="{
              'margin': item.itemMargin,
              'animation-duration': item.duration + 's',
              'display': 'flex',
              'align-items': 'center',
              'justify-content': 'center',
              'color': '#333333'
           }" @click="onChange(item.id)">
        <img style="width: 90px; height: 90px;" :src="item.itemImage"/>
        <div v-if="clickList.includes(index+1)">{{item.id}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {shuffle} from "@/utils/shuffle";
export default {
  name: "downFull",
  data() {
    return {
      clickIndex: 1,
      chooseList: [
        {
          id: 1,
          itemMargin: '3px auto 0',
          itemImage: this.$store.state.imgApiWeb + "/images/gameLevel29/wintersweet/r3.png ",
          duration: 5,
        },
        {
          id: 2,
          itemMargin: '3px 500px 0',
          itemImage: this.$store.state.imgApiWeb + "/images/gameLevel29/wintersweet/b1.png ",
          duration: 6,
        },
        {
          id: 3,
          itemMargin: '3px 300px 0 1550px',
          itemImage: this.$store.state.imgApiWeb + "/images/gameLevel29/wintersweet/r1.png ",
          duration: 7,
        },
        {
          id: 4,
          itemMargin: '3px 200px 0 750px',
          itemImage: this.$store.state.imgApiWeb + "/images/gameLevel29/wintersweet/w3.png ",
          duration: 8,
        },
        {
          id: 5,
          itemMargin: '3px 100px 0 1250px',
          itemImage: this.$store.state.imgApiWeb + "/images/gameLevel29/wintersweet/r.png ",
          duration: 9,
        },
      ],
      clickList: [],
    }
  },
  mounted() {
    // this.chooseList = shuffle(this.chooseList);
  },
  methods: {
    onChange(item) {
      console.log('i click it!', item);
      this.clickList.push(item);
      this.clickIndex = item.id;
    }
  }
}
</script>

<style lang="scss" scoped>
.animation {
  width: 50px;
  height: 50px;
  //margin: 50px auto;
  //background: deeppink;
  animation: move linear 1 normal forwards;
  animation-play-state: running;
}

.animation1 {
  width: 50px;
  height: 50px;
  //margin: 50px auto;
  //background: deeppink;
  animation: move linear 1 normal forwards;
  animation-play-state: paused;
}

input {
  display: none;
}

@keyframes move {
  0% {
    transform: translate(-75px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(75px, 250px) rotate(45deg);
  }
  50% {
    transform: translate(0, 450px) rotate(0deg);
  }
  75% {
    transform: translate(-75px, 550px) rotate(-45deg);
  }
  100% {
    transform: translate(0, 680px) rotate(0deg);
  }
}

.btn {
  margin: 10px auto;
  text-align: center;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background: #ddd;
    color: #333;
  }

  &:active {
    background: #aaa;
  }
}

#stop:checked ~ .animation {
  animation-play-state: paused;
}

#play:checked ~ .animation {
  animation-play-state: running;
}
</style>

通过transform的控制translateX轴和Y轴来决定轨迹长度和方向，用rotate控制元素的角度，来达成落叶飘落过程中旋转效果。

实现不难，看看文档可以了。