如何使用css过渡为元素设置样式,以便在隐藏时向上/向下/向左/向右滑动？
.hideUp {
transition: .5s;
display:none;
}
.hideLeft {
transition: .5s;
display:none;
}
我想将类添加到元素中并让它向左滑动并消失.谢谢!
有什么方法可以使用CSS3淡入和淡出白色背景<div>吗？内容应保持可见,因此背景应该消失.
任何使用css3转换/转换的想法？
谢谢您的帮助.
我正在对article元素实现CSS3过渡效果,但事件监听器transitionend只能在纯JavaScript中使用,而不能在jQuery中使用.
见下面的例子:
// this works
this.parentNode.addEventListener( 'transitionend', function() {alert("1"); }, true);
// this does not work
$(this).parent().addEventListener( 'transitionend', function() {alert("1"); }, true);
有人可以解释一下我做错了什么吗？
我正在使用CSS过渡来为鼠标悬停时的背景颜色设置动画.
我有以下代码:
div {
width: 100px;
height: 100px;
background: red;
}
div:hover {
background: green;
transition: all 0.5s ease-in-out;
}<div></div>此代码仅为鼠标上的背景颜色设置动画.它不会使鼠标恢复活力.我有两个问题:
如何使用CSS为鼠标设置动画？
我如何仅使用jQuery执行此操作？
jsfiddle:http://jsfiddle.net/fz39N/
假设我有一个简单的元素:
<a href="#" id="btn" onclick="return false">Click</a>
现在我可以通过点击改变这个元素的外观:active:
#btn:active {
background: red;
}
然而,我想要的是,在我点击它之后,元素将保持红色大约一秒钟而不改变HTML(因此没有复选框黑客)或javascript.是否有一个可以滥用的聪明技巧？
我正在寻找FancyBox 2的替代品.它应该是轻量级的,移动友好的(使用硬件加速的css过渡),并且可以免费使用(FancyBox不是).有什么好的选择？
我有一个包含两个类的元素:
<div class="class1 class2"></div>
.class1 {transition: background-color 0.4s;}
.class2 {transition: top 1s;}
问题是转换会class2覆盖转换class1.
我无法使用,.class2 {transition: all 1s}因为转换持续时间必须不同.
我也不想复制代码class1,class2因为class2也可以应用于其他元素.
有没有办法在不覆盖现有元素的情况下向元素添加转换？
我在创建具有特定效果的弹出菜单时遇到问题.弹出窗口从display:none到block然后我使用jquery来设置从0到1的不透明度(反之亦然).这是必要的,因为否则当元素刚刚更改了显示属性时,不会发生转换.我不认为这会传播给孩子们.但是在我的弹出窗口中,我有4列链接,这些链接具有不透明度过渡,每个链接都有自己的延迟,因此它们一次只能进入一个.但是,当弹出窗口出现时,这不起作用.它们立即处于不透明状态:1即使延迟时间很长,它仍然无效.
有没有解决的办法？我知道CSS动画和同一元素上的显示更改不起作用,但发现任何子动画也不起作用有点令人沮丧.当CSS如此简单时,我宁愿不必编写javascript.但如果javascript是唯一的答案,那么这将是一个简单的解决方案.
这是一个非常简化的代码示例:
$flyout.addClass('in').animate({opacity: 1}, 200, "linear");
"in"是导致列转换的类:
.flyout { display: none; }
.flyout.in { display: block; }
.columns li {
opacity: 0;
-webkit-transition: opacity 0.2s;
}
.flyout.in .columns li { opacity: 1; }
// delay increases with each column
.columns > li:first-child {
-webkit-transition-delay: 0.2s;
}
即使以下代码片段看起来很短,我也会在几天内挣扎(对我感到羞耻!)找到一种方法来缩放仅使用CSS3 点击的点transform.它现在有效:
var current = {x: 0, y: 0, zoom: 1}, c = document.getElementById('container');
window.onclick = function(e) {
wx = current.x + e.clientX / current.zoom;
wy = current.y + e.clientY / current.zoom;
var coef = e.ctrlKey ? 0.5 : 2;
current.zoom *= coef;
current.x = wx - e.clientX / current.zoom;
current.y = wy - e.clientY / current.zoom;
c.style.transform = 'scale(' + current.zoom +') translate(' + (-current.x) + 'px,' + (-current.y) + 'px)';
}; html, body { …我有一个元素,当它的内容发生变化时,它的宽度我想要动画.它有width: auto,而且永远不会改变.我已经看过这个技巧,但那是为了在两个值之间转换而设置一个.我根本不操纵值,只是内容,我希望我的元素大小随动画而改变.这在CSS中完全可能吗？
这是我的代码的简化版本:
.myspan {
background-color: #ddd;
}
.myspan:hover::after {
content: "\00a0\f12a";
font-family: Ionicons;
font-size: 80%;
}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
<body>
<span class="myspan">Hello!</span>
</body>
</html>当用户将鼠标悬停在元素上时,我希望将大小改变为动画.
css-transitions ×10
css ×8
css3 ×8
jquery ×3
animation ×1
events ×1
fancybox-2 ×1
html ×1
javascript ×1
open-source ×1
transform ×1
transition ×1
translate ×1