繁体   English   中英

“翻页卡” CSS动画无法在IE Edge中运行

“Flip Card” CSS Animation no working in IE Edge

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有这个动画在Firefox,Chrome和Safari中工作。 我希望它能在IE(IE11,希望是10)中工作。 某些代码是特定于IE / MS的,以尝试完成此工作,但IE可能不支持所有代码。 这是一个尝试。 我将不胜感激任何指向解决方案的指示。 即使是与此不同或使用javascript的人(尽管希望它不需要jquery)。

http://jsfiddle.net/raueqe8q/1/

 /*Animations*/ @-o-keyframes flipInnerContainer { 0% { -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @-ms-keyframes flipInnerContainer { 0% { -ms-transform: perspective(1000px) rotateY(0deg); transform: rotateY(0deg); } 50% { -ms-transform: perspective(1000px) rotateY(180deg); transform: rotateY(180deg); } 100% { -ms-transform: perspective(1000px) rotateY(180deg); transform: rotateY(180deg); } } @-moz-keyframes flipInnerContainer { 0% { -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes flipInnerContainer { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @keyframes flipInnerContainer { 0% { transform: perspective(1000px) rotateY(0deg); } 50% { transform: perspective(1000px) rotateY(180deg); } 100% { transform: perspective(1000px) rotateY(180deg); } } @-o-keyframes flipOuterContainer { 0% { -o-transform: rotateY(0deg); transform: rotateY(0deg); } 25% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @-ms-keyframes flipOuterContainer { 0% { -ms-transform: perspective(1000px) rotateY(0deg); transform: rotateY(0deg); } 25% { -ms-transform: perspective(1000px) rotateY(180deg); transform: rotateY(180deg); } 100% { -ms-transform: perspective(1000px) rotateY(180deg); transform: rotateY(180deg); } } @-moz-keyframes flipOuterContainer { 0% { -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 25% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes flipOuterContainer { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 25% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @keyframes flipOuterContainer { 0% { transform: perspective(1000px) rotateY(0deg); } 25% { transform: perspective(1000px) rotateY(180deg); } 100% { transform: perspective(1000px) rotateY(180deg); } } /* Safari was not keeping its end state so this fixes that and does not adversely effect other webkit browsers */ @-webkit-keyframes disapear { 0% { opacity: 1; } 1% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes disapear { 0% { opacity: 1; } 1% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes appear { 0% { opacity: 0; } 1% { opacity: 1; } 100% { opacity: 1; } } /*all*/ .adbox { margin: 20px; background: #000000; position: relative; z-index: 1; } #bg-exit { background-color: rgba(255, 255, 255, 0); cursor: pointer; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } .container { -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; } .container-one, .container-two, .container-three, .container-four, .threehundred-one, .threehundred-two, .threehundred-three, .threehundred-four, .seventwentyeight-one, .seventwentyeight-two, .seventwentyeight-three, .seventwentyeight-four { position: absolute; width: 100%; height: 100%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .first { position: absolute; width: 100%; height: 100%; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: visible; backface-visibility: hidden; } .first.firstonly { -webkit-animation: disapear .5s linear 10s 1 forwards; } .first.back { position: absolute; -o-transform: rotateY(180deg); -ms-transform: perspective(1000px) rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); box-sizing: border-box; } .back { -ms-animation: appear .5s linear 3.5s 1 forwards; } .third { position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -o-transform: rotateY(180deg); -ms-transform: perspective(1000px) rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile { width: 100%; height: 100%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .tile.one { -moz-animation: flipInnerContainer 2s linear 2s 1 forwards; -o-animation: flipInnerContainer 2s linear 2s 1 forwards; -webkit-animation: flipInnerContainer 2s linear 2s 1 forwards; animation: flipInnerContainer 2s linear 2s 1 forwards; } .tile.two { -moz-animation: flipInnerContainer 2s linear 4s 1 forwards; -o-animation: flipInnerContainer 2s linear 4s 1 forwards; -webkit-animation: flipInnerContainer 2s linear 4s 1 forwards; animation: flipInnerContainer 2s linear 4s 1 forwards; } .tile.three { -moz-animation: flipInnerContainer 2s linear 6s 1 forwards; -o-animation: flipInnerContainer 2s linear 6s 1 forwards; -webkit-animation: flipInnerContainer 2s linear 6s 1 forwards; animation: flipInnerContainer 2s linear 6s 1 forwards; } .tile.four { -moz-animation: flipInnerContainer 2s linear 8s 1 forwards; -o-animation: flipInnerContainer 2s linear 8s 1 forwards; -webkit-animation: flipInnerContainer 2s linear 8s 1 forwards; animation: flipInnerContainer 2s linear 8s 1 forwards; } /*160x600*/ .onesixty { width: 160px; height: 600px; } .onesixty .container { width: 160px; height: 150px; } .container-one { -moz-animation: flipOuterContainer 2s linear 11.25s 1 forwards; -o-animation: flipOuterContainer 2s linear 11.25s 1 forwards; -webkit-animation: flipOuterContainer 2s linear 11.25s 1 forwards; animation: flipOuterContainer 2s linear 11.25s 1 forwards; } .container-two { -moz-animation: flipOuterContainer 2s linear 11.75s 1 forwards; -o-animation: flipOuterContainer 2s linear 11.75s 1 forwards; -webkit-animation: flipOuterContainer 2s linear 11.75s 1 forwards; animation: flipOuterContainer 2s linear 11.75s 1 forwards; } .container-three { -moz-animation: flipOuterContainer 2s linear 11s 1 forwards; -o-animation: flipOuterContainer 2s linear 11s 1 forwards; -webkit-animation: flipOuterContainer 2s linear 11s 1 forwards; animation: flipOuterContainer 2s linear 11s 1 forwards; } .container-four { -moz-animation: flipOuterContainer 2s linear 11.5s 1 forwards; -o-animation: flipOuterContainer 2s linear 11.5s 1 forwards; -webkit-animation: flipOuterContainer 2s linear 11.5s 1 forwards; animation: flipOuterContainer 2s linear 11.5s 1 forwards; } 
 <section class="onesixty adbox"> <div id="bg-exit"> </div> <div class="container"> <div class="container-three"> <div class="tile three"> <div class="first firstonly"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-1.jpg" height="150px" width="160px"> </div> <div class="first back"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-2.jpg" height="150px" width="160px"> </div> </div> <div class="third"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-3.jpg" height="150px" width="160px"> </div> </div> </div> <div class="container"> <div class="container-one"> <div class="tile one"> <div class="first firstonly"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-1.jpg" height="150px" width="160px"> </div> <div class="first back"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-2.jpg" height="150px" width="160px"> </div> </div> <div class="third"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-3.jpg" height="150px" width="160px"> </div> </div> </div> <div class="container"> <div class="container-four"> <div class="tile four"> <div class="first firstonly"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-1.jpg" height="150px" width="160px"> </div> <div class="first back"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-2.jpg" height="150px" width="160px"> </div> </div> <div class="third"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-3.jpg" height="150px" width="160px"> </div> </div> </div> <div class="container"> <div class="container-two"> <div class="tile two"> <div class="first firstonly"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-1.jpg" height="150px" width="160px"> </div> <div class="first back"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-2.jpg" height="150px" width="160px"> </div> </div> <div class="third"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-3.jpg" height="150px" width="160px"> </div> </div> </div> </section> 

1 个回复

这是完全不同的,但是我在IE中使用了一个解决方案。 现在,它可以在Safari中运行。

原始问题的示例在Safari中有效。

因此,对于这两者,所有现代浏览器都提供了一种解决方案。

http://jsfiddle.net/0tggmkbf/

<script type="">

        function flip1(){
          var id='container1';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
          d.className = d.className + myClassName; // adding new class name

        }
        function flip2(){
          var id='container2';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
          d.className = d.className + myClassName; // adding new class name
                 }
        function flip3(){
          var id='container3';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
          d.className = d.className + myClassName; // adding new class name
        }
        function flip4(){
          var id='container4';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
          d.className = d.className + myClassName; // adding new class name
           }

//My Attempt at the 3rd flip, not working

        function finalFlip1(){
        var imgElement = document.getElementById('A1'); //find the image
          imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-3.jpg";
          var id='container1';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,"");
        }
        function finalFlip2(){
         var imgElement = document.getElementById('B1'); //find the image
          imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-3.jpg";

          var id='container2';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,"");
        }
        function finalFlip3(){
                  var imgElement = document.getElementById('C1'); //find the image
          imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-3.jpg";

          var id='container3';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,"");
        }
        function finalFlip4(){
          var imgElement = document.getElementById('D1'); //find the image
          imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-3.jpg";

          var id='container4';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,"");
        }

         window.setTimeout(flip1,2000);
        window.setTimeout(flip2,4000);
        window.setTimeout(flip3,6000);
        window.setTimeout(flip4,8000);

        window.setTimeout(finalFlip1,11250);        
        window.setTimeout(finalFlip2,11750);
        window.setTimeout(finalFlip3,11000);
        window.setTimeout(finalFlip4,11500);
</script>

<style>

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

/*  UPDATED! flip the pane when this class is added */
.container.flip .back {
  transform: rotateY(0deg);
}

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

.container, .firstonly, .back {
    width: 160px;
    height: 150px;
}

/* flip speed goes here */
.container-one,.container-two,.container-three,.container-four {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

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

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

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

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

.third{
  display:none;
}
</style>


<section class="onesixty adbox">
    <div id="bg-exit"></div>

    <div class="container" id="container3">
        <div class="container-three">
            <div class="tile three">
                <div class="first firstonly">
                    <img id="C1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-1.jpg" height="150px" width="160px" />
                </div>

                <div class="first back">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-2.jpg" height="150px" width="160px">
                </div>

            </div>
         </div>
    </div>

    <div class="container" id="container1">
        <div class="container-one">
            <div class="tile one">
                <div class="first firstonly">
                    <img id="A1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-1.jpg" height="150px" width="160px">
                </div>

                <div class="first back">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-2.jpg" height="150px" width="160px">
                </div>
            </div>

        </div>
    </div>

    <div class="container" id="container4">
        <div class="container-four">
            <div class="tile four">
                <div class="first firstonly">
                    <img ID ="D1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-1.jpg" height="150px" width="160px">
                </div>

                <div class="first back">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-2.jpg" height="150px" width="160px">
                </div>

            </div>

        </div>
    </div>

    <div class="container" id="container2">
        <div class="container-two">
            <div class="tile two">
                <div class="first firstonly">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-1.jpg" height="150px" width="160px" ID="B1">
                </div>

                <div class="first back">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-2.jpg" height="150px" width="160px">
                </div>

            </div>

        </div>
    </div>
</section>
1 IE和Edge中的翻页卡

在Internet Explorer中,有什么方法可以解决翻转&lt;div&gt;与rotateY(180deg)过渡问题吗? 悬停时, &lt;div&gt;消失,然后在动画后出现。 这是小提琴。 #card { height: 200px; position: rela ...

4 IE和Edge无法为CSS更改运行Javascript

我已经编写了一个简单的脚本,用于使用“ .logged_inn_text”类更改div的颜色。 该脚本通过从单击的链接中获取背景样式并将其插入到类中来工作。 该代码是在Chrome浏览器中完成的,并且运行良好,而在IE和Edge中则什么也没有发生。 如果我alert名为color的va ...

5 CSS过渡无法在IE和Edge上运行

我的特定转换代码不适用于IE和Edge 我尝试在index.html上插入&lt;meta http-equiv =“ X-UA-Compatible” content =“ IE = Edge /&gt;,但可惜仍然无法正常工作 index.js ...

2021-03-30 15:33:31 0 10   reactjs
7 IE11和Edge中奇怪的CSS3动画问题

我制作了一个CSS3动画,它在Firefox和Chrome中效果很好,但是在IE11和Edge中却表现不同。 我无法解决此问题,因为使用IE开发人员工具很难调试CSS3动画。 Edge上也会发生此问题(但我认为我的Edge版本已过时,因此请尝试仅在IE11中重现此问题。此修复程序可能对两 ...

8 CSS翻页卡-Chrome中的错误

我有一个CSS翻转卡,它已在此处设置为jsFiddle: https://jsfiddle.net/kwudsgfw/ 这在FireFox,MS Edge甚至IE中都可以正常工作,但是在Chrome(以及基于Chrome的浏览器,例如Opera)中存在问题。 在Chrome中, ...

10 css3动画和jquery的视觉问题(悬停翻页卡)

自述文件:-&gt;我在将翻转卡悬停时遇到麻烦,如果在div内悬停时移动光标会不断触发并产生令人讨厌的效果,所以这是我需要的: 1)我想将鼠标悬停在翻转卡上,并且即使在悬停时将光标移到内部也不要再次触发动画。 2)我还需要在翻转卡中垂直放置中心p标签, margin-top有效, mar ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM