Tag: css transitions

涉及“white-space：nowrap”的高度转换：可能用更少的Javascript？: 学科我有一个文本框，用省略号隐藏溢出的文本。只能看到一行。我使用text-overflow和white-space: nowrap完成了这个white-space: nowrap 。元素具有固定的height值。点击/单击时，框应平滑地展开（它的高度）以显示文本的其余部分。我使用CSS转换和Javascript完成了这个。隐藏的“阴影”描述容器包含相同的文本，没有空格和溢出处理。它有全高。当设置实际的盒子时，我设置从“shadow”元素读取的height值，并添加一个类，它将删除空白和溢出的东西。 transition: height选项使此更改顺利进行。题我想在没有额外的Javascript逻辑和没有阴影元素的情况下这样做。我想没有这样做使用setTimeout()等待转换阴影元素仅删除white-space和text-overflow不起作用，因为它们不可转换。我很好奇是否有另一种技巧可以做到这一点。工作代码小提琴： http ： //jsfiddle.net/ywQTd/ （使窗口足够小以触发text-overflow: hidden ） CSS： #control { position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0, 0.05); } .description { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: rgba(0,0,0, […]

如何删除/切换元素上的hover类（在单击时翻译）而不必再次移动鼠标？: 如果您单击并且不移动鼠标，您将看到按钮的颜色保持为红色！我想要完成的是在你点击并且不移动鼠标之后它仍然移除/切换.hover类。关于jsFiddle的示例 $(function() { var $Btn = $(‘.button’); $Btn.hover(function() { $(this).toggleClass(“hover”); }); $Btn.on(“click”, function() { $(this).toggleClass(‘active’) $(‘.move’).toggleClass(‘angle’); }); }); .move { border: 1px solid #000000; padding: 10px; transition: transform .2s ease; /* have noticed issue is in “transition” */ } .button.hover { color: red; } .angle { transform: translate(100px, 0); } on click still […]

浏览器有时会在CSS3转换期间忽略jQuery单击事件: 当元素包含通过CSS transition动画的另一个元素时，偶尔不会触发单击事件。测试用例： http ： //codepen.io/anon/pen/gbosy 我有一个布局，其中一系列图像具有在hover时显示的标题。点击它们会触发相邻元素的.slideDown 。他们自己可能会被用户快速点击。现场网站上的问题比在codepen中更明显。在codepen中，大约90％的点击都被遵守，而当CSS过渡被禁用时，100％被遵守。欢迎任何建议。我应该注意到这个问题最容易在Chrome中复制，在Safari中不太常见，而在Firefox中则少见。

10秒后显示div并在10秒后隐藏: 我需要在页面加载后在10秒内显示一个div（例如#mybox），让它在另外10秒内保持可见，然后用漂亮的滑入/滑出效果隐藏。非常感谢任何提示/帮助！

等待css转换: 我正在使用css过渡来设置我的一个div的边距。我需要知道如何等待这个效果结束所以我可以调用其他function然后……有什么办法吗？我读了一些关于堆栈溢出的其他post，但它们看起来与我的问题不同。

jQuery addClass方法链接以执行CSS转换: 我想做什么（破产）： go $(‘button’).click(function () { $(‘div’).css({ ‘transition’: ‘left 1000ms’ }).addClass(‘left’).addClass(‘left_more’); }); http://jsfiddle.net/0bm4wq7h/13/ 仍然破产： go $(‘button’).click(function () { $(‘div’).css({ ‘transition’: ‘left 1000ms’ }).addClass(‘left’); console.log(‘test’); $(‘div’).addClass(‘left_more’); }); http://jsfiddle.net/fwL3dwz2/3/ 但这有效： go $(‘button’).click(function () { $(‘div’).css({ ‘transition’: ‘left 1000ms’ }).addClass(‘left’); console.log($(‘div’).css(‘left’)); $(‘div’).addClass(‘left_more’); }); http://jsfiddle.net/j8x0dzbz/5/ 我知道我需要一个CSS过渡的起点。这就是我加left原因。为什么jQuery在我的＃3之前不会进行转换？更新：所以我接受了Stryner的答案，因为它对我有用，现在我又遇到了同样的问题。上面的代码是这个JavaScript的简化版本： $(‘#screen_wrapper img:eq(0)’).removeClass().addClass(‘prep’); //starting point window.getComputedStyle(document.getElementById(‘photo’+0)).left; […]

CSS3替换jQuery.fadeIn和fadeOut: 我编写了少量代码来尝试使用CSS过渡来复制jQuery的.fadeIn()和.fadeOut()函数，以便在触摸设备上更好看。理想情况下，我想避免使用图书馆，以便我可以准确地写出我想要的内容，并作为学习练习。 fadeOut效果很好。 fadeIn的想法是使用CSS3过渡来调整元素的不透明度，之后元素将被设置为display:block; （使用is-hidden类）以确保它不是可点击的或覆盖它下面的东西。 fadeIn虽然不起作用。我认为这是因为在删除is-animating类的同时添加了is-animating类。 transitionEnd事件永远不会触发，因为没有发生转换： function fadeIn (elem, fn) { var $elem = $(elem); $elem.addClass(‘is-animating’); $elem.removeClass(‘is-hidden’); $elem.removeClass(‘is-hiding’); $elem.on(transitionEndEvent, function () { $elem.removeClass(‘is-animating’); if (typeof fn === ‘function’) { fn(); } }); }; 和CSS .is-animating { @include transition(all 2000ms); } .is-hiding { // Will transition @include opacity(0); } .is-hidden { // Won’t transition […]

当使用CSS过渡/动画/等时，如果用户浏览器不执行css动画，那么回退到jquery的最佳方法是什么？: 我正在寻找一种使用css动画的方法，但是如果用户浏览器没有做css动画 – 然后再回到使用Jquery动画。在Jquery有一个简单的方法吗？如果它是一个小插件，插件就可以了，但是如果可能的话，我真的在寻找一些在jquery中这样做的方法。我想使用css动画的唯一原因是因为使用css动画时使用的处理器功率要低得多。

是否可以旋转单词的字符而不是使用css3旋转整个单词: 我试图使用onload窗口事件转换div文本。我知道transform: rotate(360deg) scaleX(-1); 使整个单词旋转，但我需要旋转文本字符并在加载时将它们返回到相同的位置。我的小提琴，并在mysite初始化它将答案标记为正确。仍然需要更好的答案！

向下滚动时如何构建浮动菜单栏: 当我向下滚动网站显示时，顶部的黑色菜单栏看起来像浮动条。但我认为这涉及到jquery。我试过CSS，但似乎不像我想要的那样为我工作 #menucontainer { position:fixed; top:0; height: 250px } #firstElement { margin-top: 250px } 这是我想要菜单的网站基本概念： http://avathemes.com/WP/Hexic/