如何解决css animation paused暂停失效 亲测有用 + awrswiper箭头动态 + 末尾左转 qwq

有点点想学css动画 先来个实现代码吧

前面随便写写

 <span @click="change"  class="swiper-button-next" :class="this.pause===true?'p1':'pp'" >

           <img src="./img/right.png">

          </span>

click随便写写js

@-webkit-keyframes bounce-right {

         25% {-webkit-transform: translateX(20px);}

         50%, 100% {-webkit-transform: translateX(0);}

         75% {-webkit-transform: translateX(-10px);}

        }

 

  @keyframes bounce-right {

        25% {transform: translateX(10px);}

         50%, 100% {transform: translateX(0);}

         75% {transform: translateX(-10px);}

        }

最后! 没错  绑定两个就好了  我也不知道为什么paused无效 注意 下面的paused是无效的  我只是把animation给去掉了→_→

而且如果写长长的一串  这样也可以 但是会有位移  不知道为啥

总之 亲测可行好吧  以后多补点神奇的动画模式

.pp{

   animation: bounce-right 1s  linear infinite;

  animation-play-state:running;

}

.p1{

  animation-play-state:paused;

}

          最后放个 http://www.divcss6.com/thread-1357-1-1.html 高手写动画的例子

 

awrswiper箭头动态 + 末尾左转 

1 箭头动态  好像写了 一个animation就可以了

到end 左转本来 我给他加了旋转动画  还处心积虑这样写:

动画:  还挺好看的.. 

	
			.test-normal{
				 transform: rotate(0deg);
	            -webkit-transform: rotate(0deg);
	            transition: transform .5s;
			}
			
			.test-inverse{
				transform: rotate(180deg);
	            -webkit-transform: rotate(180deg);
	            transition: transform .5s;
			}
原文链接：https://blog.csdn.net/fisher_yu01/article/details/80167868

代码

<span @click="change"  class="swiper-button"  
           :class= "[[(this.pause===true)?'p1':'pp'],
           {'test-normal':       this.onSwipeStart===true},
           {'test-inverse':      this.onSwipeEnd===true},
           {'swiper-button-prev':this.onSwipeEnd===true},
           {'swiper-button-next':this.onSwipeStart===true}]
           " aria-disabled=false
           >

你也看到了  我还给他写了data

 methods:{
    change(){
      this.pause=true;
      //if(this.isSwipeFirstTime==true)
      //  this.isSwipeFirstTime=false;
      console.log("nnn"+this.realIndex);
      console.log(this.isSwipeFirstTime);
       swiperOptionB.navigation.update();
      if(this.realIndex==9){
        this.onSwipeEnd=true;
        this.onSwipeStart=false;

      }
      else if(this.realIndex==0&&this.isSwipeFirstTime==false){
        onSwipeStart=true;
        onSwipeEnd=false;
      }
      else{
      }
    }
  },
 swiperOptionB: {里还有 

 on: {
          slideChangeTransitionEnd: function () {
            //console.log(this.activeIndex);
            self.realIndex = this.realIndex;

类似这样

但是发现呢 1  这样有延迟  获取到的大概要等个0.5s   如果点击的太快 是拿不到的

2  最可怕的就是 

点击完了之后 虽然打了个转儿

但是 它无效了 我仔细一看 原来是因为多了一个 aria-disabled=false   的坑  因为末尾了  组件封装的叫他不能点了  这可难坏了我们...  这还怎么搞 这搞毛线呢 

本来 上面那四个class绑定肯定成功了 因为都转了 查看元素也ok  但是 就是不能用 就是因为那个该死的属性

完了之后  找不到接口取消  而且不能 覆盖掉 不能覆盖掉....

.................

真是坑 啊

我累了  最后 看https://blog.csdn.net/qq_37154178/article/details/102837987 

这里 直接写到onend这里 然后display block or none 

....................  两个之间切换 虽然有点慢  但是好歹实现了 行8 

太坑了真的是