我想将图像div取出到ahref之外，同时保持按下链接时对其产生的效果。我试过了，但一旦它不再在主div中，动画就不起作用了。
注意：JS脚本是设置一个延迟，让图像动画化，然后访问链接。
https://codepen.io/jinzagon/pen/JjXWzQj
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a style="position:absolute; z-index:999999;"href="http://google.com" class="section">TEST
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" />
</div>
</a>
CSS
body{
background-color:black;
}
a {
overflow: hidden;
}
.section {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.response {
position: absolute;
top: 0px;
left: 00px;
width: 100%;
height: 100%;
transition: 4s ease-out;
opacity: 1;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
}
.clicked .response {
animation: response 4s;
}
@keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}
JS-
$(document).ready(function() {
$('.section').click(function(e) {
e.preventDefault();
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('href'));
}, 1700);
});
});
我仍然不确定你是在用JavaScript将div带到标签之外，还是只是手动地想这样硬编码。我假设是后一种
<a style="position:absolute; z-index:999999;"href="http://google.com" class="section">TEST
</a>
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" />
</div>
以及您的JS
$(document).ready(function() {
$('.section').click(function(e) {
e.preventDefault();
var $responsiveDiv = $('.response')
$responsiveDiv.addClass('clicked'); // Instead of adding clicked to a tag add class clicked directly to responsive div
setTimeout(function() {
window.location.assign($responsiveDiv.attr('href'));
}, 1700);
});
});
以及您的CSS
body{
background-color:black;
}
a {
overflow: hidden;
}
.section {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.response {
position: absolute;
top: 0px;
left: 00px;
width: 100%;
height: 100%;
transition: 4s ease-out;
opacity: 1;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
}
.clicked { /* Changed */
animation: response 4s;
}
@keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}
您是否考虑过使用data-属性？这可能是解决这个问题最简单的方法：
$(document).ready(function() {
$('.response img').click(function(e) {
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('data-href'));
}, 1700);
});
});body{
background-color:black;
}
a {
overflow: hidden;
}
.response {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
animation: response 4s;
}
@keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" data-href="http://google.com" />
</div>如果你还需要a，你现在可以把它移到你喜欢的任何地方。