[英]Transition between CSS background images
在我的网站上,我可以在向下箭头&和向上箭头之间进行切换。 看到这里: http : //jsfiddle.net/4uLghzg7/
单击后是否可以添加轻微的动画过渡? 因此,它在两个图标之间淡入/淡出了吗?
function close_accordion_section(source) { $(source).parent().find('.accordion-section-title').removeClass('active'); $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open'); } $('.accordion-section-title').click(function (e) { if ($(e.target).is('.active')) { close_accordion_section(e.target); } else { $(this).addClass('active'); $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open') } e.preventDefault(); });
.accordion { overflow: hidden; margin-bottom: 40px; } .accordion-section { padding: 15px; border: 1px solid #d8d8d8; background: #fbfbfb; } .accordion-section-title { width: 100%; display: inline-block; background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png"); background-size: 5% 100%; background-repeat: no-repeat; background-position: top right; } .accordion-section-title.active { background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat; background-size: 5% 100%; background-repeat: no-repeat; } .accordion-section-title.active, .accordion-section-title:hover { text-decoration: none; transition: color 0.1s linear; } .accordion-section-content { padding: 15px 0; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a> <div id="accordion-1" class="accordion-section-content"> <p>Text.</p> <p> </div> </div> </div>
您需要一个特殊的技巧来在背景图像之间淡入淡出,您将需要两个元素并淡化内部元素的opacity
:
<div id="arrowUp">
<div id="arrowDown">
</div>
</div>
您的代码演示(已修改):
function close_accordion_section(source) { $(source).parent().find('.arrowDown').removeClass('active'); $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open'); } $('.accordion-section-title').click(function(e) { if ($('.arrowDown').is('.active')) { close_accordion_section(e.target); } else { $('.arrowDown').addClass('active'); $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open') } e.preventDefault(); });
.accordion { overflow: hidden; margin-bottom: 40px; } .accordion-section { padding: 15px; border: 1px solid #d8d8d8; background: #fbfbfb; } .arrowUp { width: 20px; height: 20px; background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png"); background-size: 100%; background-repeat: no-repeat; background-position: center center; } .arrowDown { opacity: 0; width: 20px; height: 20px; background-color: white; background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"); background-size: 100%; background-repeat: no-repeat; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .arrowDown.active { opacity: 1; background-position: center center; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .accordion-section-title.active, .accordion-section-title:hover { text-decoration: none; transition: color 0.1s linear; } .accordion-section-content { padding: 15px 0; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a> <div class="arrowUp" style="float: right"> <div class="arrowDown"> </div> </div> <div id="accordion-1" class="accordion-section-content"> <p>Text.</p> <p> </div> </div> </div>
只需在中编写.click函数
$(function() {
});
尝试这个..
$(function() {
$('.accordion-section-title').click(function (e) {
e.preventDefault();
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
});
});
您可以将箭头更改为实际元素(在以下示例中为伪元素),然后将它们放在一起。 然后,使向下箭头淡入/淡出向上箭头,以创建所需的效果。
// up arrow positioned absolutely
.accordion-section-title:before {
content: '';
position: absolute;
}
// down arrow positioned absolutely
.accordion-section-title:after {
content: '';
opacity: 0;
transition: opacity 0.2s ease;
position: absolute;
}
// animate in down arrow
.accordion-section-title:after {
content: '';
opacity: 1;
position: absolute;
}
jsfiddle工作示例: http : //jsfiddle.net/4uLghzg7/6/
希望这能回答您的询问。
您实际上无法在光栅背景图像上做很多动画处理,但是如果CSS 3过渡是可以接受的,则可以尝试类似
.fade-background{
transition: background 1s cubic-bezier(0.55, 0.06, 0.68, 0.19) !important;
}
我在锚标签上添加了“ fade-background”类,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.