卡片翻转动画在Internet Explorer 11中的实现

Question

卡片翻转动画在Internet Explorer 11中的实现

javascriptjqueryhtmlcssinternet-explorer

11

我正在尝试制作一张翻转卡片并显示其背面。它在其他所有浏览器中都可以工作，但在Internet Explorer 11中不行。

我尝试添加了-ms-前缀，但没有帮助。问题似乎是IE不支持css属性 transform-style: preserve-3d。

这里有一个jsfiddle示例：https://jsfiddle.net/gbkq94hr/

HTML

<body>
    <article>
        <div id="card0" class="card">
            <figure class="front">
            </figure>
            <figure class="back">
            </figure>
        </div>
    </article>
</body>

JavaScript

$(document).ready(function () {
    var flipped = false;
    var card = $("#card0");
    card.click(function() { flipFunction();});

    function flipFunction() {
        if (flipped) {
            flipped = false;
            card.removeClass('flip');
        } else {
            card.addClass('flip');
            flipped = true;
        }
    };
});

CSS

html {
    height: 100%;
}

.flip {
    transform: rotateY(180deg);
}

.card {
    float:left;
    width: 110px;
    height: 139px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 1s;
    position: relative;
}

figure {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -ms-backface-visibility:hidden;
}

.back {
    background-color: blue;
    transform: rotateY(-180deg);
}

.front {
    z-index: 2;
    background-color: red;
    transform:rotateY(0deg);
}

article {
    height: 114px;
    width: 114px;
    perspective: 1000;
}

编辑：

如评论中所建议的那样，我尝试按照David Walsh的说明操作，但仍然无法使其正常工作。 https://jsfiddle.net/w9o2chmn/2/

- Waltari

1

请参考 https://davidwalsh.name/css-flip，它可能会对您有所帮助。 - RRR

那可能可行，但我无法在按钮点击时使其工作。 :/ - Waltari

请检查我的答案 - RRR

2个回答

0

不确定为什么第二个动画会延迟这么长时间，因为我在自己的代码中完全相同地使用了这种方法。也许有人可以整理一下这个问题。基本上想要添加一个轻微的延迟来改变z-index，以便在动画处于边缘（50%完成动画）时，z-index发生变化并允许它正确地显示在顶部。

$(document).ready(function() {

    $('.flip-container').on('click', function(){
        if(!$(".front").hasClass("front_flip")) {
        
            $(".front").delay(200).queue(function(){
                $(this).addClass("flip_z_index").dequeue();
            });
            
            $('.front').addClass('front_flip');
            $('.back').removeClass('back_flip');
            
        } else {
        
            $(".front").delay(200).queue(function(){
                $(this).removeClass("flip_z_index").dequeue();
            });
            
            $('.front').removeClass('front_flip');
            $('.back').addClass('back_flip');
        
        }
    });

});

.flip-container {
    perspective: 1000;
    color:#fff;
}

.flip-container, .front, .back {
    width: 200px;
    height: 200px;
}

.card {
    transform-style: preserve-3d;
}

.front, .back {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 3;
    background:red;
}

.back {
    z-index:2;
    background:blue;
}

.front_flip {
    transform: rotateY(-180deg);
}
.back_flip {
    transform: rotateY(180deg);
}
.flip_z_index {
    z-index:1 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="flip-container">
    <div id="card0" class="card">
        <div class="front">
        front
        </div>
        <div class="back back_flip">
        back
        </div>
    </div>
</article>

- MomasVII

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RRR · Accepted Answer

你好，我已经更改了jQuery代码，使得点击时可以翻转卡片。请查看https://jsfiddle.net/w9o2chmn/6/

HTML 我在article标签中添加了class flip-container

<article class="flip-container">
    <div id="card0" class="card">
        <figure class="front">
        front
        </figure>
        <figure class="back">
        back
        </figure>
    </div>
</article>

CSS 我已经移除了CSS中的:hover代码，并将其放置在jQuery的click事件中。

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
  color:#fff;
}

/*  UPDATED! flip the pane when hovered */
    /*.flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }*/

.flip-container, .front, .back {
    width: 200px;
    height: 200px;
}

/* flip speed goes here */
.card {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
  background:red;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
  background:blue;
}

/*

jQuery

$(document).ready(function() {
    var flipped=false;

    $('.flip-container').on('click', function(){
        if(!flipped){
      $('.back').css('transform','rotateY(0deg)');
      $('.front').css('transform','rotateY(180deg)');
      flipped=true;
      console.log('true part :'+flipped);
      }
      else{
        $('.back').css('transform','rotateY(180deg)');
      $('.front').css('transform','rotateY(0deg)');
      flipped=false;
      console.log('else part :'+flipped);
      }
    });


});

请告诉我它是否对您有效...

附注：我在IE11上测试过，对我有效