本文共 2190 字，大约阅读时间需要 7 分钟。
有点点想学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;
}
最后放个 高手写动画的例子
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 代码
你也看到了 我还给他写了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 但是 就是不能用 就是因为那个该死的属性
完了之后 找不到接口取消 而且不能 覆盖掉 不能覆盖掉....
.................
真是坑 啊
我累了 最后 看
这里 直接写到onend这里 然后display block or none
.................... 两个之间切换 虽然有点慢 但是好歹实现了 行8
太坑了真的是