css动画

 知识点

1、animation-name：xx   （设置关键帧的名称为xx）
2、animation-duration：5s  （动画持续时间为5s）
3、animation-timing-function： linear （动画时间曲线 也叫做运行速度为匀速）
取值：
linear 匀速
ease （默认）低速开始—>加速—>结束前减速
ease-in 以低速开始
ease-out 以低速结束
ease-in-out 以低速开始和结束
4、animation-delay:5s  (动画等待5后开始)
5、animatiom-iteration-count：1   （动画播放次数为1次）
取值：xx数字，定义应该播放xx次动画、 infinite-无限次执行
6、animation-direction： alternate（设置动画为反向播放 ）
取值：
nomal（默认）-执行完一次之后回到起点继续执行下一次
alternate-往返动画，执行完一次之后往回执行下一次
reverse-反向执行
7、animation-fill-mode： （动画结束的最后一帧）
取值：
none-不做任何改变
forwards-让元素结束状态保持动画最后一帧的样式
backwards-让元素等待状态的时候显示动画第一帧的样式
both-等待状态显示第一帧，结束状态保持最后一帧
8、animation-play-state：  （设置动画是否暂停）
取值：running-执行动画 、paused-暂停动画

以上可简写为

animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画

animation：动画名称 动画时长  （有这两个即可以完成动画，其它未设置，有默认值）

@keyframes fade-down{
   0% {
      css样式
   }
   50% {
      css样式
   }
   100% {
      css样式
   }
}

示例：图片从下往上开始出现，如果想要多个图片逐渐出现，可以控制动画延迟animation-delay属性

<img class="animate" src="@/assets/images/image3.png" alt="" />
.animate {
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: fade-down;
}
@keyframes fade-down {
  0% {
    transform: translateY(600px);
  }
  100% {
    transform: translateY(0px);
  }
}

上述代码只能让动画在加载时执行一次，如何让动画出现在视野的时候执行

方法1：使用v-if和监听页面滚动控制

<div v-if="show" class="content">
    内容
</div>
mounted() {
   window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
},
methods: {
   handleScroll() {
     const scrollTop =
     window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
     //动画元素距离顶部的高度
     if (scrollTop >= 80) {
       this.show = true
     }
   }
},
//由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错
beforeDestroy() {
   window.removeEventListener('scroll', this.handleScroll)
}
//css
.content{
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: fade-down;
    animation-delay: 600ms;
}

方法2：通过动态class及css控制，适用于多个相同动画的元素来回切换

<div v-for="item in imgList" :key="item.id">
  <img
     :class="item.class"
     @click.stop="show(item.id)"
     @mouseenter="show(item.id)"
     :src="item.url"
     v-show="current !== item.id"
     alt=""
  />
  <img :class="item.class" v-show="current === item.id" :src="item.actUrl" alt="" />
</div>
<div class="text" :class="'animate' + current">
    {{ textList[current - 1] }}
</div>
<script>
show(item) {
   this.current = item
}
</script>
<style scoped lang="scss">
.text {
   font-size: 18px;
   line-height: 38px;
   animation-delay: 100ms;
   animation-play-state: running;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
   animation-duration: 0.5s;
}
.animate1 {
   animation-name: business1;
}
.animate2 {
   animation-name: business2;
}
.animate3 {
   animation-name: business3;
}
.animate4 {
   animation-name: business4;
}
.animate5 {
   animation-name: business5;
}

@keyframes business1 {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes business2 {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes business3 {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes business4 {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes business5 {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
</style>