翻转卡不会在移动设备上翻转回来

问题描述

如何在移动设备上获得翻转效果？它在 pc 上运行良好，因为我使用了 :hover 伪选择器，但在移动设备上它只翻转一次，只有在单击另一张卡时才会翻转回来。如何在手机和平​​板上实现全翻盖效果？

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
    margin: 2%;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    Box-shadow: 0 4px 8px 0 rgba(0,0.2);
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front,.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #bbb;
    color: white;
  }
  
  .flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
  }
  .preiposle{
      display: flex;
      justify-content: space-evenly;
      padding-top: 50px;
      position: relative;
      text-align: center;
      color: white;
      flex-wrap: wrap;
  }

解决方法

松开手指时向后翻转

当您点击触摸设备的屏幕时，您必须想象您的理论鼠标光标（不可见）已移动到您手指的位置，当您松开手指时，它将保持在该位置，直到您点击别的地方。 我可以考虑两种解决方案：

1. 您将其保持原样，因此您必须点击离开才能将其返回
2. 或者您在用户松开手指后立即将其转回来（只要您希望它被翻转，您就需要将手指保持在屏幕上）

您已经有了第一个解决方案，所以这里是第二个 (this solution on fiddle)：

let touch_div = document.getElementById('touch_div');
let is_touch_device = false;
let touchstart_event_listener;  // save the event listeners,if you want to delete them later
let touchend_event_listener;    // save the event listeners,if you want to delete them later


if ("ontouchstart" in document.documentElement) {   // check if touch is enabled on device
  is_touch_device = true;
}

if (is_touch_device) {
  touch_div.classList.add('touch-device');  // adds a class to style the div for touch devices
  
  touch_div.addEventListener('touchstart',touchstart_event_listener = () => {  // event listener changes the class to hovered when you put your finger on the div
    touch_div.classList.replace('touch-device','touch-device-hovered');
  });
  
  touch_div.addEventListener('touchend',touchend_event_listener = () => {    // event listener changes the class back to not hovered when you release your finger
    touch_div.classList.replace('touch-device-hovered','touch-device');
  });
} else {
  touch_div.classList.add('mouse-device');  // adds a class to style the div for mouse devices
}

.mouse-device {
  width: 100px;
  height: 100px;
  background-color: purple;
}
.mouse-device:hover {
  background-color: green;
}
.touch-device {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
}
.touch-device-hovered {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: blue;
}
.margin-top {
  margin-top: 10px;
}

<div class="mouse-device"></div>                  <!-- this will always be a div that changes style on hover -->
<div id="touch_div" class="margin-top"></div>     <!-- this will be identical to the first div when you're not on a touch device,but it will change to touch sensitive when you are on a touch device -->

这些 div 不会翻转，但您应该了解如何控制触摸设备上的样式。

如果您对我的解决方案有任何疑问，请回复此内容。

,

我觉得你可以试试这个。

Down()

,

更新：我发现使用媒体查询隐藏了更简单的解决方案：

@media only screen and (hover: none){
      // styles go here
}