■目的
カクカクしないようGPU処理でcontentクラスとtoggledクラスを
javascriptで切り替えてアコーディオンを行う。
iPhoneシュミレーターでGPU処理されていたが、
iPhone6以上だとアニメーション中に引っかかるため手直しが必要。
■slide.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="import.css" type="text/css">
<script src="jquery.js" charset="utf-8"></script>
<script src="accordion.js" charset="utf-8"></script>
</head>
<body>
<section>
<article class="" id="slide1">
<div class="caption_h">
<span class="title_h">スライド１</span>
</div>
<div class="content toggled">
<p>テストテスト
<br>
<br>テストテストテストテストテストテストテストテスト
<br>テストテストテストテストテストテストテストテストテストテストテスト
<br>
<br>テストテストテストテストテストテストテスト
<br>テストテストテストテストテストテストテスト
<br>
<br>テストテストテストテストテストテストテストテストテストテストテストテスト
<br>テストテストテストテストテストテストテストテストテスト
<br>
<br>テストテストテストテストテストテストテストテスト
<br>テストテストテストテストテストテストテストテストテストテストテストテストテストテスト
</p>
</div>
</article>
<article class="" id="slide2">
<div class="caption_h">
<span class="title_h">スライド２</span>
</div>
<div class="content toggled">
<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
<br>
<br>■テストテストテストテストテストテストテストテストテストテスト
<br> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
<br> テストテストテストテストテストテストテストテスト
<br>
<br>■テストテストテストテストテストテスト
<br> テストテストテストテストテストテストテストテストテストテストテストテストテスト
<br>
<br>■テストテストテストテスト
<br> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
<br> テストテストテストテストテストテストテストテストテストテスト
</p>
</div>
</article>
</section>
</body>
</html>
■accordion.js
$(function(){
$("article").on("click", function() {
var id = this.id;
var myClass = $("#"+id+" div.content").hasClass("toggled");
if( myClass === false){
$("#"+id+" div.content").css('height','0');
$("#"+id+" div.content").addClass('toggled');
}else{
var height = $("#"+id+" div.content p").css('height');
$("#"+id+" div.content").css('height',height);
$("#"+id+" div.content").removeClass('toggled');
}
});
});
■import.css
@charset "UTF-8";
body {
margin: 0 auto;
color: white;
background: white;
}
section {
margin-bottom: 40px;
}
article {
margin: 0 auto 20px;
width: 570px;
position: relative;
}
article:hover > div.content {
will-change:animation,transform,background-position,height,padding;
}
div.content {
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
transition:-webkit-transform 0.4s linear,background-position 0.4s linear,height 0.4s linear,padding-top .6s linear,padding-left .6s linear,padding-right .6s linear, padding-bottom .6s linear,border-top-width .6s linear;
-webkit-transition:-webkit-transform 0.4s linear,background-position 0.4s linear,height 0.4s linear,padding-top .6s linear,padding-left .6s linear,padding-right .6s linear, padding-bottom .6s linear,border-top-width .6s linear;
overflow:hidden;
margin-left: 20px;
width: 510px;
height: 100%;
padding: 15px 20px 15px 20px;
font-size: 15px;
color:black;
line-height: 1.5;
background: aliceblue;
z-index: 1;
}
div.toggled {
overflow:hidden;
padding-top: 0;
padding-bottom: 0;
height: 0;
border-width: 0 1px;
}
.caption_h {
font-weight: bold;
padding: 10px 60px 10px 20px;
height: 31px;
font-size: 18px;
line-height: 1.5;
background: black;
box-shadow: 0 10px 10px rgba(0,0,0,0.9);
position: relative;
overflow: hidden;
z-index: 2;
}
.title_h {
text-shadow: 0 0 8px #00ac0c;
}