kolja_private

2-step transition

<script>
    function toggle() {
            var menu = document.getElementById('box');
            menu.classList.toggle('hidden1');
    }
</script>

<style>
    .box {
            background: goldenrod;
            width: 300px;
            height: 300px;
            margin: 0px auto;
            transition: 
            height 1s 1s,
            opacity 1s 2s ; 
            display: block;
            position: relative;
    }

    .hidden1 {
            opacity:0.3;
            height: 10px;
            /* width: 10px; */
            margin: 0 auto;
    }
</style>

<button onclick="toggle()">TOGcGLE VISIBILITY</button>
<div id="box" class="box"></div>

<?php  

function CallAPI($method, $url, $data = false) {  
    $curl = curl_init();  

    switch ($method)  
    {  
        case "POST":  
            curl_setopt($curl, CURLOPT_POST, 1);  

            if ($data)  
                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);  
            break;  
        case "PUT":  
            curl_setopt($curl, CURLOPT_PUT, 1);  
            break;  
        default:  
            if ($data)  
                $url = sprintf("%s?%s", $url, http_build_query($data));  
    }  

    // Optional Authentication:  
    curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);  
    curl_setopt($curl, CURLOPT_USERPWD, "username:password");  

    curl_setopt($curl, CURLOPT_URL, $url);  
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);  

    $result = curl_exec($curl);  

    curl_close($curl);  

    return $result;  
}  
// Get request  
$get_response = CallAPI('GET', 'http://example.com');  

echo $get_response;  

// Post request  
$data = array();  
$data['name'] = 'joashp';  
$data['email'] = 'joashp@example.com';  

$post_response = CallAPI('POST', 'http://example.com', $data);  

echo $post_response;