要素を移動してこの要素に影響を及ぼそうとしていますが、別の要素には影響しません。私は、このクラスが100%に幅と0の幅に対するクラス.home-portfolio
パスを更新することを望む.home-service
を合わせるとSass - 1つ以上の要素に遷移する
これはSASSにhttps://jsfiddle.net/dgv0sas9/1/
.portfolio-services {
width: 100%;
height: 200px;
max-height: 200px;
}
.portfolio-services .rectangle, .portfolio-services .home-portfolio, .portfolio-services .home-services {
width: 50%;
height: 100%;
float: left;
cursor: pointer;
}
.portfolio-services .home-portfolio {
background-color: white;
-webkit-transition: width 2s ease;
-webkit-transform: translateZ(0);
}
.portfolio-services .home-services {
background-color: #222222;
-webkit-transition: width 2s ease;
-webkit-transform: translateZ(0);
}
.portfolio-services .home-services:hover {
width: 100%;
}
.portfolio-services .home-services:hover .home-portfolio {
width: 0%;
}
<div class="portfolio-services">
<div class="home-portfolio"></div>
<div class="home-services"></div>
</div>
私のコードのバージョンです。
どうすればいいですか?
ありがとうございました
ありがとうございました。これは私が必要なものです。ブラウザのパフォーマンスに関連するトランザクションについてもっと知ることができるリソースを知っていますか? – user3242861
そこには数多くの優れた記事があります。参考になるものがあります:http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ あなたが避けたいのはその核心ですすべてのキーフレーム中にビューを再ペイントします。 – sammyray