卡片翻转动画 Internet Explorer 11答案

【问题标题】：Card flip animation Internet Explorer 11卡片翻转动画 Internet Explorer 11
【发布时间】：2016-09-01 03:09:10
【问题描述】：

我正在尝试翻转卡片并显示其背面。它适用于所有其他浏览器，但不适用于 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>

$(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;
}

编辑：

按照 cmets 中的建议，我尝试按照 David Walshes 的说明进行操作，但仍然无法正常工作。 https://jsfiddle.net/w9o2chmn/2/

【问题讨论】：

请参考davidwalsh.name/css-flip它可能会有所帮助
这可以工作，但我无法让它在按钮点击时工作。 ://
请检查我的答案

标签： javascript jquery html css internet-explorer

【解决方案1】：

您好，我更改了 jQuery 代码以在点击时执行卡片翻转。请查看https://jsfiddle.net/w9o2chmn/6/

HTML 我在文章标签中添加了 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);
      }
    });


});

如果它对你有用，请告诉我......

PS：我在 IE11 上对此进行了测试，它对我有用

【讨论】：

jsFiddle 在 IE11 中不适合我。我在 Windows 10 上
这很棒，在 IE11、Opera、Firefox 和 Chrome 中对我有用，但在 Safari 中动画看起来很奇怪。这张卡看起来一半是红色，一半是蓝色。任何想法如何解决它？
在 Windows 10 上的 ie11 上不能工作，只能在 Windows 8 上工作
IE11 不支持动画 3d 变换。至少 3d 在 Windows 10 中不再工作。
这对我很有用。为了让卡片翻转看起来更自然，将 else .back 变换从 rotateY(180deg) 更改为 rotateY(-180deg)。

【解决方案2】：

不知道为什么第二个动画会延迟，只要我在自己的代码中使用此方法完全相同。也许有人可以清理这个。基本上是想添加一点延迟来更改 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>

【讨论】：