Question

在我的应用程序中，我在webview中使用CSS3动画。所有动画都能正常工作，但是当我改变顶部和缩放动画的同时，页面会令人烦恼地闪烁。我在Chrome浏览器中打开hmtl，它也起作用了。

CSS代码

  .container { 
            position: relative;
        -webkit-perspective: 1000;
        -webkit-backface-visibility: hidden;
        -webkit-animation: animationFrames ease-in 5s;
        -webkit-animation-iteration-count: 1;
        -webkit-transform-origin: ;
        -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/  
        -webkit-transform: translate3d(0, 0, 0); 
 }
@-webkit-keyframes animationFrames {
  0% {
    left:0px;
    top:0px; 
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }

  100%{
      top:-1052px; 
    left:45px;
    -webkit-transform:  rotate(0deg) scaleX(4.0) scaleY(4.0);
  }
}

HTML代码

<div id="container">
    <img id="leftDoor" src="leftDoor.png" style="position:absolute;"/>
    <img id="rightDoor" src="rightDoor.png"style="position:absolute;" />
    <img id="bak" src="background.png"  style="position:absolute;" />
    <p id="textOf" onclick="openDoors()">Giriş</p>
</div>

Javascript

function openDoors(){  
        $("#leftDoor").toggleClass("leftDoor");
        $("#rightDoor").toggleClass("rightDoor");
        $("#background").toggleClass("background");
        $("#container").toggleClass("container");
    }

Android webview设置

webview.setVerticalScrollBarEnabled(false);

        webview.getSettings().setJavaScriptEnabled(true);

        webview.getSettings().setBuiltInZoomControls(true);
        webview.getSettings().setDisplayZoomControls(false);

        webview.getSettings().setUseWideViewPort(true);
        webview.getSettings().setLoadWithOverviewMode(true);

        webview.getSettings().setAllowFileAccess(true);
        webview.getSettings().setAllowContentAccess(true); 
        webview.addJavascriptInterface(new ReaderJavascriptHandler(this), "OkutusJS");

        webview.getSettings().setPluginState(WebSettings.PluginState.OFF);
        webview.getSettings().setAppCacheEnabled(false);

        webview.setScrollBarStyle(CustomWebview.SCROLLBARS_OUTSIDE_OVERLAY);
        webview.setScrollbarFadingEnabled(false);

        // webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

        webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        webview.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

        webview.setWebChromeClient(new WebChromeClient()); 
        webview.setWebViewClient(new WebViewClient());

        webview.setOnTouchListener(new WebviewOnTouch(readPager,pageGestureDetector)); 

        // webview.getSettings().setNeedInitialFocus(false);
        webview.getSettings().setRenderPriority(RenderPriority.HIGH);
        webview.setInitialScale(1);

        webview.setOnLongClickListener(new View.OnLongClickListener() {
            public boolean onLongClick(View v) {
                // return true;
                return false; 
            }
        });

问题视频为http://youtu.be/ihq0-4egDHs，

完整的html页面http://cembora.com/sample.html

注意：我的应用程序是硬件加速的;

Webview css3动画无法正常工作

0 个答案: