Question

我有2个div， div1 实际上是在页面加载时显示， div2 不是，当用户点击 link1 我需要有一个在 div1 到 div2 之间平滑过渡。

我已经搜索并找到了一些与jquery和其他库有关的解决方法，但我无法设法做到这一点。如果有人可以帮助我，那就太好了。

Answer 1

对将在浏览器中触发硬件加速的属性使用CSS3过渡，即CSS Opacity属性

$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['message'];


$uri = 'https://mandrillapp.com/api/1.0/messages/send.json';

$postString = '{
"key": "xxxxxxxxxxxxx",
"message": {
    "html": "this is the emails html content",
    "text": "this is the emails text content",
    "subject": "this is the subject",
    "from_email": "me@gmail.com",
    "from_name": "John",
    "to": [
        {
            "email": "me@yahoo.com",
            "name": "Bob"
        }
    ],
    "headers": {

    },
    "track_opens": true,
    "track_clicks": true,
    "auto_text": true,
    "url_strip_qs": true,
    "preserve_recipients": true,

    "merge": true,
    "global_merge_vars": [

    ],
    "merge_vars": [

    ],
    "tags": [

    ],
    "google_analytics_domains": [

    ],
    "google_analytics_campaign": "...",
    "metadata": [

    ],
    "recipient_metadata": [

    ],
    "attachments": [

    ]
},
"async": false
}';

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $uri);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true );
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true );
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postString);

$result = curl_exec($ch);

echo $result;

要触发tranisiton，只需通过JS为div1添加一个隐藏类，将不透明度设置为零

transition:opacity 1s ease;

Vanilla JS版本http://jsfiddle.net/sjmcpherso/L3fg08zp/

用jQuery来切换你可以使用的类：

.hide{opacity:0;visibility:hidden;}

Answer 2

您可以查看jQuery.fadeIn和jQuery.fadeOut。参见＆＃34;演示＆＃34;用于演示的页面部分。

如何创建内容平滑过渡

2 个答案: