Как достичь эту анимацию с помощью css?

Question

Как сделать точно такой же эффект перехода между страницами (андроид версию) при клике на PUSH PAGE с помощью css (без посторонних библиотек)

https://onsen.io/v2/api/js/ons-navigator.html // источник

Answer 1

$(document).ready(function(){
    $('#ios').click(function(){
        $('.ios').css('opacity','1')
        $('.android').css('opacity',0)
    })
})
$(document).ready(function(){
    $('#android').click(function(){
        $('.android').css('opacity','1')
        $('.ios').css('opacity',0)
    })
})

.ios{
    position:absolute;
    width:200px;
    height:400px;
    background-color: yellow;
    transition: 1s;
    opacity: 0;
}
.android{
    position:absolute;
    width:200px;
    height:400px;
    background-color: yellowgreen;
    transition: 1s;
    opacity: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<button id="ios">IOS</button>

<button id="android">android</button>
<div class="ios">IOS</div>
<div class="android">ANDROID</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как достичь эту анимацию с помощью css?

Ответы (1 шт):