卡片翻转动画 Internet Explorer 11

Posted 2023-03-06

技术标签:

【中文标题】卡片翻转动画 Internet Explorer 11【英文标题】：Card flip animation 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它可能会有所帮助这可以工作，但我无法让它在按钮点击时工作。 :// 请检查我的答案 【参考方案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>

【讨论】：

以上是关于卡片翻转动画 Internet Explorer 11的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS动画卡片翻转

Material-ui卡片翻转动画

如何在 UIScrollView 中的对象（UIViews）上执行翻转动画

在 Internet Explorer 中的曲线路径上为 SVG 设置动画

CSS3 动画无限在 Internet Explorer 11 中无法正常工作

jQuery 不透明度动画在 Internet Explorer 中扭曲定位