CSS/JS:更改滑动时的不透明度 [英] CSS/JS: Change opacity on swipe

问题描述

我想在滑动元素时更改其不透明度.

I want to change the opacity of an element while swiping on it.

我希望获得一种类似于代码段中的动画，然后逐渐应用，具体取决于我的手指/光标在滑动时拖动元素的程度.

I would like to achieve an animation similar to the one in the snippet, that is applied gradually depending on how much my finger/cursor has dragged the element while swiping.

编辑:动画与在Android中清除通知相同

The animation is the same as clearing a notification in Android

• 我的第一个想法是处理拖动事件并根据元素的位置和屏幕的宽度更改不透明度.这是一个好的解决方案吗?有没有更好的选择，也许只有CSS?

我正在使用离子(我的元素是离子项目)，所以与 ionic/angular1 相关的任何事情也可能很好.

I'm using ionic (my element is a ion-item), so anything related to ionic/angular1 could be good too.

div.animated {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 31px;
    animation: right 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

.back {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    position: fixed;
    top: 30px;
    left: 50px;
}

@keyframes right {
    0% {
       left: 0px;
       opacity: 0.1;
    }
    50% { opacity: 1;}
    100% {left: 100px;opacity:0.1}
}

The blue frame is the screen and the red square is the dragged element
<div class="animated"></div>
<div class="back"></div>

推荐答案

Ansrew的非常有用.在Ionic中，更容易使用onDrag和onRelease指令.

Ansrew's is very useful. In Ionic it is easier to use onDrag and onRelease directives.

<ion-item on-drag="onDrag($event)" on-release="onRelease($event)" /> 

并使用以下方法设置离子项目的样式:

And use these methods to style the ion-item:

function onDrag (e) {
    var element = e.currentTarget.childNodes[0];
    var screenW = element.offsetWidth;
    var threshold = screenW * 0.16;

    var delta = Math.abs(e.gesture.deltaX);

    if(delta >= threshold) {
        var normalizedDragDistance = (Math.abs(delta) / screenW);
        var opacity = 1 - Math.pow(normalizedDragDistance, 0.7);

        element.style.opacity = opacity;
    } else {
        e.currentTarget.childNodes[0].style.opacity = 1;
    }
}

function onRelease (e) {
    e.currentTarget.childNodes[0].style.opacity = 1;
}

这篇关于CSS/JS:更改滑动时的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！