css3 同时加载两个动画

Posted 2020-06-21

最近在做H5，遇到这样的需求（如题）

先上一部分代码：

.cur .p1d1d4{
  width: 3rem;
  margin: 2rem 5.3rem 0 0;
  -webkit-animation: p1d1d4 1s ease-out;
  animation: p1d1d4 1s ease-out;
}


@keyframes p1d1d4 {
  0% {
    margin: 2rem 10rem 0 0;
  }
  100% {
    margin: 2rem 5.3rem 0 0;
  }
}

@-webkit-keyframes p1d1d4{
  0% {
    margin: 2rem 10rem 0 0;
  }
  100% {
    margin: 2rem 5.3rem 0 0;
  }

  

正常情况下基本思路是： 

 监听webkitAnimationEnd动画结束以后再add另一个class

1 document.querySelector(‘.p1d1d4‘).addEventListener("webkitAnimationEnd",function(e){
2     this.classList.add(‘p1d1d4Scale‘)
3 }) 

  这样的话两个 动画连接在一起（自己脑补效果），但是这样做有个问题是如果这个方案是单页面形式的，回到之前页面过后会发现这个页面始终保留在p1d1d4Scale的动画结束效果，如果想再次执行之前的效果的话，可能要把之前的class效果去掉然后再加上

  但是我想在一个class中实现这个效果怎么实现呢

pasting

  在这里我想到了transition

  简单介绍一下这个属性
  这个方法有4个属性

  transition-property     指定缓动的属性

  transition-duration     缓动的执行时间

  transition-timing-function  缓动类型

  transition-delay         在指定时间之后执行（延期执行） 

说道这里大家应该就懂了

.cur .p1d1d4{
  width: 3rem;
  margin: 2rem 5.3rem 0 0;
  -webkit-animation: p1d1d4 1s ease-out;
  animation: p1d1d4 1s ease-out;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  transition: all 1s ease-out 2s;
  -webkit-transition: all 1s ease-out 2s;
  -moz-transition: all 1s ease-out 2s;
  -o-transition: all 1s ease-out 2s;
  -ms-transition: all 1s ease-out 2s;
}

  动画结束之后2秒执行，分享到此结束 

从今天起我打算随心一些写博客，可能会基本的分享思路和方案或者技巧，言外之意就是可能会很简短，我上次的随笔 react demo是真东西，可以直接上手项目，全局ES6写法 webpack打包加载  热加载  react-router 总之汇集了一个小的demo，欢迎关注