app左滑旋转后消失
uni-app 2021-08-24 14:45:04 uni-app   动画   

1、左滑偏移量不足100，手指停止移动时，复位 

1.gif

 

2、左滑偏移量大于100，手指停止移动时，缓慢消失，透明度降为0

2.gif 

 

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <div class="n-full-height n-bg-primary article-answer">  
  3.         <n-navbar bgType="primary" :lefts="leftIcons" :rights="navbarRight" title="" itemIconType="inverse"  
  4.             titleType="inverse" @leftAction="navLeftAction"></n-navbar>  
  5.   
  6.         <!--  @click="change" -->  
  7.         <div class="article-answer-top n-position-relative">  
  8.             <div class="top n-flex-column n-align-center">  
  9.                 <div class="box1"></div>  
  10.                 <div class="box2"></div>  
  11.             </div>  
  12.               
  13.             <div class="article-answer-cards" ref="cards" @touchstart="touchStart" @touchmove="touchMove" @touchcancel="onAllTouchCancel" @touchend="touchEnd">  
  14.                 <div class="t3"><text class="t3-text">{{asyncItem.tag}}</text></div>  
  15.                 <div class="problem">  
  16.                     <text class="problem-text">{{asyncItem.problem}}</text>  
  17.                 </div>  
  18.                 <div class="desc n-flex-row n-wrap-nowrap n-align-center">  
  19.                     <text class="desc-text">{{asyncItem.attention_num}}人关注</text>  
  20.                     <text class="desc-text">·</text>  
  21.                     <text class="desc-text">{{asyncItem.comment_num}}人回答</text>  
  22.                 </div>  
  23.                 <div class="n-flex-row n-wrap-nowrap n-align-center n-position-absolute bottom-box">  
  24.                     <image class="avatar" :src="asyncItem.author.avatar" mode="aspectFill"></image>  
  25.                     <text class="name">{{asyncItem.author.name}}</text>  
  26.                 </div>  
  27.             </div>  
  28.               
  29.         </div>  
  30.           
  31.         <div class="article-answer-btns n-flex-row n-wrap-nowrap n-align-center n-justify-center">  
  32.             <div class="n-flex-column n-align-center">  
  33.                 <div class="article-answer-btns-box n-flex-row n-justify-center n-align-center">  
  34.                     <image class="article-answer-btns-img" src="/static/img/icon-buganxingqu.png"></image>  
  35.                 </div>  
  36.                 <text class="article-answer-btns-text">不感兴趣</text>  
  37.             </div>  
  38.   
  39.             <div class="n-flex-column n-align-center" @click="toDrawer">  
  40.                 <div class="article-answer-btns-box n-flex-row n-justify-center n-align-center">  
  41.                     <image class="article-answer-btns-img" src="/static/img/icon-xiehuida.png"></image>  
  42.                 </div>  
  43.                 <text class="article-answer-btns-text">写回答</text>  
  44.             </div>  
  45.   
  46.             <div class="n-flex-column n-align-center">  
  47.                 <div class="article-answer-btns-box n-flex-row n-justify-center n-align-center">  
  48.                     <image class="article-answer-btns-img" src="/static/img/icon-shaohou.png"></image>  
  49.                 </div>  
  50.                 <text class="article-answer-btns-text">稍后答</text>  
  51.             </div>  
  52.         </div>  
  53.   
  54.         <answer :title="asyncItem.title" ref="answer"></answer>  
  55.   
  56.     </div>  
  57. </template>  
  58.   
  59. <script>  
  60.     // #ifdef APP-NVUE  
  61.     const animation = uni.requireNativePlugin('animation')  
  62.     // #endif  
  63.       
  64.     import { getTouchPoint } from '@/ui/utils/element.js'  
  65.     import navHelper from '@/service/navHelper.js'  
  66.     import answer from './components/answer.nvue'  
  67.  
  68.     export default {  
  69.         mixins: [navHelper],  
  70.         components:{  
  71.             answer  
  72.         },  
  73.         data() {  
  74.             return {  
  75.                 navbarRight: [{  
  76.                     icon: '',  
  77.                     text: '稍后答（10）',  
  78.                     textStyle: 'font-size:28rpx;color:#FFF;',  
  79.                     style: '',  
  80.                 }],  
  81.                 asyncItem: {  
  82.                     title:"2021高考作文难吗？",  
  83.                     tag: "最近83人提问过这个问题",  
  84.                     problem: "关于陈红军壮烈牺牲的报道，陈红军的“发小”王煦辉这几天看了一遍又一遍，从小玩到大的伙伴如今已经天人相隔，让他至今也无法接受。在同学眼中，陈红军打小就是一位品学兼优的好子，就是这个家境贫寒的农村娃，考上了城里的高？",  
  85.                     author: {  
  86.                         id: 1,  
  87.                         name: "一颗棒棒糖",  
  88.                         avatar: "/static/avatar/1.jpg",  
  89.                     },  
  90.                     comment_num: 5160, // 评论数  
  91.                     dig_num: 5160, // 顶数  
  92.                     forward_num: 5160, // 转发数  
  93.                     attention_num: 30, // 关注数  
  94.                 },  
  95.                 startX: 0, //滑动开始x轴位置  
  96.                 startY: 0, //滑动开始y轴位置  
  97.                 moveX: 0, //滑动的x轴距离  
  98.                 moveY: 0, //滑动的y轴距离  
  99.                 like_state:0,//-1：左滑，0：没滑动，1：右滑  
  100.                 skewDeg:0,//当前滑动卡片的倾斜度  
  101.                 el:null  
  102.             }  
  103.         },  
  104.         created() {  
  105.             // 操作对象  
  106.             this.$nextTick(e => {  
  107.                 thisthis.el = this.$refs["cards"];  
  108.             })  
  109.         },  
  110.         methods: {  
  111.             onAllTouchCancel(e) {  
  112.                 console.log("onAllTouchCancel")  
  113.             },  
  114.             toDrawer(){  
  115.                 this.$refs["answer"].show()  
  116.             },  
  117.             /**  
  118.              * 触摸开始：记录位置  
  119.              * */  
  120.             touchStart (event) {  
  121.                 const point = getTouchPoint(event)  
  122.                 this.startX = point.x;  
  123.                 this.startY = point.y;  
  124.                   
  125.                 // console.log(this.startX,this.startY)  
  126.             },  
  127.             /**  
  128.              * 触摸开始滑动  
  129.              * */  
  130.             touchMove (event) {  
  131.                 const now = getTouchPoint(event)  
  132.                 var currentX = now.x;  
  133.                 var currentY = now.y;  
  134.                 var moveX = currentX - this.startX;  
  135.                 var moveY = currentY - this.startY;  
  136.                 var text = '';  
  137.                 var state = 0;//-1：左滑，0：没滑动，1：右滑  
  138.                 // //左右方向滑动  
  139.                 if (Math.abs(moveX) > Math.abs(moveY)) {  
  140.                     if (moveX < -10) {  
  141.                         text = '左滑';  
  142.                         state=-1;  
  143.                     } else if (moveX > 10) {  
  144.                         text = '右滑';  
  145.                         state=1;  
  146.                     }  
  147.                     this.skew(moveX,moveY);  
  148.                 }else {//上下方向滑动  
  149.                     if (moveY < 0) text = '上滑';  
  150.                     else if (moveY > 0) text = '下滑';  
  151.                 }  
  152.                 // console.log(text)  
  153.                 this.like_state = state;  
  154.                 this.moveX = moveX;  
  155.                 this.moveY = moveY;  
  156.             },  
  157.             /**  
  158.              * 触摸结束  
  159.              * */  
  160.             touchEnd (event) {  
  161.                 console.log(`移动距离:${Math.abs(this.moveX)}`)  
  162.                 if(Math.abs(this.moveX)>100){  
  163.                     this.hidden();  
  164.                 }else{  
  165.                       
  166.                     // #ifdef APP-NVUE  
  167.                     animation.transition(this.el, {  
  168.                         styles: {  
  169.                             transform: `rotate(0px)`,  
  170.                         },  
  171.                         duration: 300,  
  172.                         // timingFunction: 'ease-in-out',  
  173.                         delay:1000  
  174.                     }, () => {  
  175.                         // uni.showToast({  
  176.                         //  title: 'finished',  
  177.                         //  icon: 'none'  
  178.                         // });  
  179.                     })  
  180.                     // #endif  
  181.                       
  182.                 }  
  183.             },  
  184.             /**  
  185.              * 触摸结束，卡片消失  
  186.              * */  
  187.             hidden (){  
  188.                 var anim = {  
  189.                     duration: 400,  
  190.                     timingFunction: 'ease-in-out'  
  191.                 };  
  192.                   
  193.                 if(this.like_state==-1){  
  194.                     anim.transform = 'translate(-400px, -400px)'  
  195.                 }else if(this.like_state==1){  
  196.                     anim.transform = 'translate(400px, -400px)'  
  197.                 }  
  198.                   
  199.                 // #ifdef APP-NVUE  
  200.                 console.log(anim)  
  201.                 animation.transition(this.el, anim, () => {  
  202.                     // uni.showToast({  
  203.                     //  title: 'finished',  
  204.                     //  icon: 'none'  
  205.                     // });  
  206.                     animation.transition(this.el, {  
  207.                         styles: {  
  208.                             transform: `rotate(${this.skewDeg}px)`,  
  209.                             opacity:0  
  210.                         },  
  211.                         duration: 500,  
  212.                         delay:1000  
  213.                     }, () => {  
  214.                         // uni.showToast({  
  215.                         //  title: 'finished',  
  216.                         //  icon: 'none'  
  217.                         // });  
  218.                     })  
  219.                 })  
  220.                 // #endif  
  221.                   
  222.             },  
  223.             /**  
  224.              * 触摸卡片倾斜  
  225.              * */  
  226.             skew (moveX,moveY){  
  227.                 let that = this;  
  228.                 if(Math.abs(moveX)<180){  
  229.                     //console.log(`角度：${this.skewDeg}`)  
  230.                     this.skewDeg = moveX / 4; // 旋转  
  231.                     // console.log("skewDeg",this.skewDeg)  
  232.                     // #ifdef APP-NVUE  
  233.                     animation.transition(this.el, {  
  234.                         styles: {  
  235.                             transform: `rotate(${this.skewDeg}px)`,  
  236.                         },  
  237.                         duration: 500,  
  238.                         timingFunction: 'linear',  
  239.                         delay:1000  
  240.                     }, () => {  
  241.                         // uni.showToast({  
  242.                         //  title: 'finished',  
  243.                         //  icon: 'none'  
  244.                         // });  
  245.                     })  
  246.                     // #endif  
  247.                 }  
  248.             },  
  249.         }  
  250.     }  
  251. </script>  
  252.   
  253. <style lang="scss">  
  254.     page {  
  255.         background-color: #477FE7;  
  256.     }  
  257.   
  258.     .article-answer {  
  259.         &-top {  
  260.             margin-top: 100rpx;  
  261.   
  262.             .box1,  
  263.             .box2 {  
  264.                 background: #BBD2FC;  
  265.                 box-shadow: 0px 2rpx 30rpx 0px rgba(94, 114, 153, 0.3);  
  266.                 border-top-left-radius: 30rpx;  
  267.                 border-top-right-radius: 30rpx;  
  268.                 height: 25rpx;  
  269.             }  
  270.   
  271.             .box1 {  
  272.                 width: 560rpx;  
  273.             }  
  274.   
  275.             .box2 {  
  276.                 width: 620rpx;  
  277.                 height: 815rpx;  
  278.                 border-bottom-left-radius: 30rpx;  
  279.                 border-bottom-right-radius: 30rpx;  
  280.             }  
  281.               
  282.         }  
  283.           
  284.         .article-answer-cards {  
  285.             position: absolute;  
  286.             top: 50rpx;  
  287.             width: 690rpx;  
  288.             margin-left: 30rpx;  
  289.             background: #FFFFFF;  
  290.             height: 795rpx;  
  291.             box-shadow: 0px 2rpx 30rpx 0px rgba(94, 114, 153, 0.3);  
  292.             border-radius: 30rpx;  
  293.             // overflow:hidden;  
  294.             padding: 30rpx;  
  295.             /* #ifndef APP-NVUE */  
  296.             box-sizing: border-box;  
  297.             /* #endif */  
  298.               
  299.                   
  300.             }  
  301.               
  302.               
  303.             .t3 {  
  304.                 padding: 0 0 25rpx 0;  
  305.           
  306.                 .t3-text {  
  307.                     font-size: 26rpx;  
  308.                     background-color: #ECECEC;  
  309.                     padding: 8rpx 18rpx;  
  310.                     color: #999999;  
  311.                     border-radius: 10rpx;  
  312.                 }  
  313.             }  
  314.           
  315.             .problem {  
  316.                 height: 180rpx;  
  317.                 overflow: hidden;  
  318.                 text-overflow: ellipsis;  
  319.           
  320.                 .problem-text {  
  321.                     font-size: 32rpx;  
  322.                     color: #333333;  
  323.                     line-height: 46rpx;  
  324.                 }  
  325.             }  
  326.           
  327.             .desc {  
  328.                 margin-top: 36rpx;  
  329.           
  330.                 .desc-text {  
  331.                     font-size: 26rpx;  
  332.                     color: #999999;  
  333.                 }  
  334.             }  
  335.           
  336.             .bottom-box {  
  337.                 bottom: 30rpx;  
  338.                 left: 30rpx;  
  339.           
  340.                 .avatar {  
  341.                     width: 80rpx;  
  342.                     height: 80rpx;  
  343.                     border-radius: 50%;  
  344.                     margin-right: 20rpx;  
  345.                 }  
  346.           
  347.                 .name {  
  348.                     font-size: 28rpx;  
  349.                     color: #AAAAAA;  
  350.                 }  
  351.             }  
  352.           
  353.         }  
  354.   
  355.           
  356.         .article-answer-btns {  
  357.             margin-top: 55rpx;  
  358.   
  359.             &-box {  
  360.                 width: 150rpx;  
  361.                 height: 150rpx;  
  362.                 background: #FFFFFF;  
  363.                 box-shadow: 0px 2rpx 30rpx 0px rgba(94, 114, 153, 0.3);  
  364.                 border-radius: 50%;  
  365.                 margin: 0 30rpx;  
  366.             }  
  367.   
  368.             &-img {  
  369.                 width: 74rpx;  
  370.                 height: 74rpx;  
  371.             }  
  372.   
  373.             &-text {  
  374.                 font-size: 30rpx;  
  375.                 color: #FFFFFF;  
  376.                 margin-top: 18rpx;  
  377.             }  
  378.         }  
  379.     }  
  380. </style>  

 

 

本文来自于：https://www.e-learn.cn/topic/3248115

上一篇 uni-app 设置页面背景颜色有效办法
下一篇 仿知乎叠加卡片动画切换效果
相关的文章
Powered by yoyo苏ICP备15045725号