向 CSS 过渡/动画添加触摸/滑动命令答案

【问题标题】：Adding a touch/swipe command to a CSS transition/animation向 CSS 过渡/动画添加触摸/滑动命令
【发布时间】：2023-04-05 15:34:02
【问题描述】：

我正在尝试自学滑动功能，因为在当今时代它们变得越来越有用。我在旋转 div 下方有一个 CSS 动画。目前它只是在悬停时旋转，但我想要实现的是在滑动/触摸时旋转。

我的 CSS 动画

.trigger{
width:100%;
height:400px;
background-color:white;
}
.hover-img {
 position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
}
.trigger:hover > .hover-img {
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
font-size:14px;
color:white;
}

我的 HTML

<div id="cell1">
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
<br><br><br><br>
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
</div>

这是JS Fiddle 显示我目前拥有的东西。

这是我使用此动画的livelink，一旦问题得到解答，我将立即删除它，以供本文的后代使用。

L.H 的更新 CSS

.trigger{
width:100%;
height:400px;
background-color:white;
}
.hover-img:active {
background-color:green;
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
}
.trigger:hover > .hover-img:active {
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
font-size:14px;
color:white;
}

更新的 HTML

<body ontouchstart="">

<div id="cell1">
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
<br><br><br><br>
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
</div>

【问题讨论】：

标签： css touch swipe swipe-gesture

【解决方案1】：

我知道您写道，您想学习如何处理触摸并自己滑动，这很酷。另外我知道，如果您想要一个可靠的解决方案，可能还有很多工作要做，为什么我希望您查看已经提供的 Modernizr 库。

请查看： http://www.hongkiat.com/blog/detect-touch-device-modernizr/

如果您真的想自己编写低级代码，您至少可以从 Modernizr 库中获得灵感。

一切顺利。

【讨论】：

它看起来很复杂，目前无法解决这种情况。那是一个周末阅读它。我明天就做哈哈！现在有解决我的问题的方法吗？
显然有一点“hack”可以更轻松地实现它。您可以在 CSS 中使用 :active 伪选择器来设置应该发生的样式。然后你可以把 ontouchstart="" 和 onmouseover="" 属性放到你想要触发 :active 事件的元素上。请参阅：stackoverflow.com/questions/8330559/… Havent 对此进行了测试。
这似乎只有当我在 ipad 上按住手指时它会再次消失 :( 不过谢谢
别担心 - 当然，我现在会看看你的直播链接 :)
哈哈，在输入代码后，它现在不会在台式电脑上悬停时旋转，但在 ipad 上它会像 roids 上的疯狂 div 一样旋转，但只有当我按住它时：/ wagwan！