I have been unable to get the kendo page turn effect to work acceptably in chrome. The appearance is staggered and on android mobile, which I am targeting for my application, it does not appear to work at all.
Below is plunkr http://plnkr.co/edit/aWIthiWY1UEPret8BOkT?p=preview
<html><head> <meta charset="utf-8"> <title>Kendo UI Mobile Loves AngularJS</title> <meta http-equiv="Content-Security-Policy" content="default-src http://ajax.googleapis.com/ http://code.jquery.com/ http://demos.telerik.com/kendo-ui/ ; http://cdn.kendostatic.com/ ; https://static.pexels.com/ 'self' https://localhost:44309/ https://localhost:44300/ https://caredarestorage.blob.core.windows.net/ 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src http://cdn.kendostatic.com/ 'self' 'unsafe-inline'; media-src *"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css"> <!-- the application CSS file --> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-sanitize.js"></script> <style> #wrap { background-image: url("../content/web/fx/pageturn/book.png"); width: 100%; height: 90%; margin: 2.5em auto 4em; position: relative; } #book { position: relative; width: 85%; height: 85%; margin: 0 auto; padding: 0; list-style-type: none; } #book > li { position: absolute; width: 100%; height: 100%; background-color: #fff; } #actions { overflow: hidden; margin: 0 auto 3em; width: 650px; } #previous, #next { text-decoration: none; text-indent: -999em; overflow: hidden; display: block; height: 100%; width: 50%; position: absolute; top: 0; background-repeat: no-repeat; background-position: 50% 50%; opacity: .5; } #previous:hover, #next:hover { opacity: 1; } #previous { background-image: url('content/css/imagesrotator/arrow-left.png'); left: 0; } #next { background-image: url('content/css/imagesrotator/arrow-right.png'); right: 0; } .first-page #previous, .last-page #next { display: none; } .preloadSlide * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; } .divSection { display: table; width: 100%; height: 100%; z-index: 0; } .divRandomText { height: 100%; font-size: large; line-height: 130%; padding: 10% 15% 15% 15%; display: table-cell; vertical-align: middle; white-space: normal; } .divBackgroundImage { background-color: white; height: 100%; width: 100%; position: absolute; right: 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; background-repeat: no-repeat; *z-index: -1; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000', GradientType=1); } </style></head><body kendo-mobile-application ng-app="sushiMobileApp"> <kendo-mobile-view k-layout="'default'" ng-controller="indexController" k-stretch="'true'" k-on-show="show(kendoEvent)"> <kendo-mobile-header> <kendo-mobile-nav-bar> Veterinary Wellness </kendo-mobile-nav-bar> </kendo-mobile-header> <div id="divHome"> Slides {{slides.length}} Slide {{currentIndex}} <div fill-height id="divWholePageWrapper" style="height: 100%; width: 100%; "> <div id="wrap" class="first-page"> <ul id="book"> <li ng-repeat="slide in slides"> <div no-wrap="noWrapSlides" class="divWholePageNew" ng-style="{'background-image': 'url(' + slide.image + ')'}" style="height: 100%; width: 100%; background-repeat:no-repeat; background-position:center; "> <div class="divSection "> <div class="divRandomText"> <div style="position: relative;height:100%;background-color: white; opacity: .85; border:2px solid gainsboro;"> <div class="row"> <div class="col-md-2"> <div class="circle color-1 color1-box-shadow" style="position:absolute;left:-20px;top:20px"> <p> <div style="margin-top:-10px; font: italic 29px/32px Cambria, serif;text-shadow: black 0 1px 0;">{{slide.careCardDate | date:'d'}}</div> <div style="margin-top:-8px;display: block;font: Georgia, serif;font-size: 12px;text-transform: uppercase;font-weight: bold;text-shadow: black 0 1px 0;">{{slide.careCardDate | date:'MMM'}}</div> </p> </div> </div> <div class="col-md-8"><h3 style="text-align:center">{{slide.careCardName}}</h3></div> <div class="col-md-2"> </div> </div> <center> </center> <p style="text-align:center" class="cardTextNew" ng-bind-html="slide.task"> </p> </div> </div> </div> </div> </li> <li class="current"> <div no-wrap="noWrapSlides" class="divWholePageNew" style="height: 100%; width: 100%;background-image:url(https://static.pexels.com/photos/1230/landscape-mountains-nature-sky.jpg)"> <div class="divSection "> <div class="divRandomText"> <div style="position: relative;height:100%;background-color: white; opacity: .85; border:2px solid gainsboro;"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"><h3 style="text-align:center">Welcome</h3></div> <div class="col-md-2"> </div> </div> <center> </center> <p style="text-align:center" class="cardTextNew"> Daily inspiration self care wellness message.</p> </div> </div> </div> </div> </li> </ul> <a href="#" ng-click="previous($event)" id="previous">Previous page</a> <a href="#" ng-click="next($event)" id="next">Next page</a> </div> </div> </div> </kendo-mobile-view> <script> angular.module('sushiMobileApp', ['kendo.directives', 'ngSanitize']) .controller('indexController', ['$scope', function ($scope) { $scope.slides = []; var slidesData = [ { "id": 1, "cardName": "Facial", "cardDescription": "Schedule a facial once a month", }, { "id": 2, "cardName": "Stairs", "cardDescription": "Take the stairs instead of the escalator", }, { "id": 3, "cardName": "Lunch", "cardDescription": "Find time to eat lunch", }, { "id": 4, "cardName": "Vow", "cardDescription": "Vow to eat healthy", }, { "id": 5, "cardName": "Walk", "cardDescription": "Walk your dog for 20 minutes today", }, { "id": 6, "cardName": "Breathe", "cardDescription": "Take 10 deep breaths", }, { "id": 7, "cardName": "After 9pm", "cardDescription": "Turn off your phone after 9pm", }, { "id": 8, "cardName": "Don't Check", "cardDescription": "Don't check your phone from your bed", }, { "id": 9, "cardName": "Spark", "cardDescription": "Ask yourself, does the spark joy? If it doesn't, take the time to figure out how to make it better", } , { "id": 10, "cardName": "Caffeine", "cardDescription": "Try to limit your caffeine intake to 1 to 2 cups a day.", ] $scope.show = function (e) { $scope.startDate = new Date(); for (var i = 0; i < slidesData.length; i++) { $scope.addSlide(slidesData[i], i); }; } $scope.addSlide = function (slide, index) { $scope.slides.push({ image: slide.image + '?v=1', careCardName: slide.cardName, task: slide.cardDescription, careCardDate: $scope.startDate, id: index, userTaskId: slide.id, index: index }); }; $scope.previous = function (e) { e.preventDefault(); $scope.current(Math.max(1, $scope.current() - 1)); } $scope.next = function (e) { e.preventDefault(); $scope.current(Math.min($scope.slides.length, $scope.current() + 1));; } $scope.current = function (page) { var book = $("#book"), pages = book.children(), pagesCount = pages.length, current = pages.filter(".current"), currentIndex = pagesCount - current.index(), newPage; $scope.currentIndex = currentIndex; if (!arguments.length) { return currentIndex; } if (book.data("animating")) { return; } $("#wrap").toggleClass("first-page", page == 1) .toggleClass("last-page", page == pagesCount); if (page != currentIndex) { current.removeClass("current"); newPage = pages.eq(pagesCount - page).addClass("current"); if (page > currentIndex) { kendo.fx(book).pageturnHorizontal(current, newPage).play(); } else { kendo.fx(book).pageturnHorizontal(newPage, current).reverse(); } } } }]); </script></body></html>1 Answer, 1 is accepted
0
Hello,
the kendo page turn effect is a thin wrapper around the browser transitions. It does not do much apart from toggling some CSS properties. You may consider implementing something similar with CSS transitions only. The performance will be compareable.
Regards,
Petyo
Telerik
the kendo page turn effect is a thin wrapper around the browser transitions. It does not do much apart from toggling some CSS properties. You may consider implementing something similar with CSS transitions only. The performance will be compareable.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!