首页 > TAG信息列表 > css-transitions

javascript-如何在jQuery Transit中暂停和重新启动css3过渡

我正在使用jquery运输来移动和元素.我想暂停动画,然后单击按钮继续播放.但是我不知道该怎么做. JSFiddle：http://jsfiddle.net/b4hwq/2/ 我确实尝试过 stop().transition({}); 但它抛出一个错误.解决方法:使用.stop()时,您的工作大部分都已结束.我只是添加了一点逻辑,以告诉它停止

javascript-jQuery.fadeIn和fadeOut的CSS3替代

我编写了少量代码,尝试使用CSS过渡来复制jQuery的.fadeIn()和.fadeOut()函数,以使它们在触摸设备上看起来更好. 理想情况下,我想避免使用库,这样我就可以准确地编写自己想要的内容,并作为学习练习. fadeOut效果很好. fadeIn的想法是使用CSS3过渡来调整元素的不透明度,然后将元素设

javascript-jQuery .show()之后导航css无法正常工作

我的导航悬停在边框的底部,当您在网站上向下滑动后,我的第一个导航git隐藏了,而第二个导航又显示了.导航具有相同的CSS,但是我第二个导航的边界底部不起作用.这是我的CSS或jquery的问题吗？谁能帮我解决这个问题？ HTML： <header> <a href="#home" id="logo" class="smoothScro

javascript的CSS转换没有转换

当我尝试使用纯CSS进行简单转换时,一切正常. 但是,当我尝试调用单击链接时会修饰CSS的javascript函数时,没有过渡.我想淡入灰色层. HTML： <a href="someImage.jpg" id="test"> <img src="someImage.jpg" alt="" /> </a> <section id="grey">

javascript-在Twitter Bootstrap 3中切换类时的过渡

我正在使用Twitter Bootstrap 3,并且有一个包含图片或视频的DIV. div是col-sm-3,但使用jQuery时,我将鼠标悬停在col-sm-12上切换了该类.调整大小时,有什么方法可以使过渡更平滑并添加一些效果？谢谢.解决方法:尝试CSS过渡以获得良好的性能： .col-sm-3, .col-sm-12{ transition: a

javascript-检测过渡端的属性

我试图检测在相同元素具有不同延迟的多次转换的情况下完成转换的属性,例如： var cssTransitionEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'; $('div').on(cssTransitionEnd, function(e) { var borderColorEnd, backgroundColorEn

javascript-CSS3过渡和转换在类删除方面效果不佳

我已经做了一些很好的汉堡包效果,这在如今的移动导航栏中的网站上非常普遍. 因此,当有人单击汉堡包时,它会完美地旋转X(添加“ open”类时),但是当该类删除时,动画发生了怪异的变化,请在以下代码中观察效果： HTML： <div id="hamburger"> <span></span> <span></span> <s

Javascript / css过渡仅在第一次工作

我正在尝试使svg在第一次单击时旋转,然后在两次单击时都平滑地旋转回原始位置.我有以下代码. HTML： <div class="quick-access"> <div class="quick-access__toggle"> <svg id="toggle-button" viewBox="0 0 100 100" > <path d="M

javascript-React / CSS-当宽度为自动时,内容更改后动画按钮的宽度会重新调整大小

我有一个表示按钮的react组件,该按钮根据某些道具更改内容和颜色.如果表单组件包含此按钮并提交,则该按钮将更改其内容和颜色.这很好. 现在,我想要一个动画(CSS过渡),用于在按钮内容更改时进行更改.不能为不同的状态设置显式宽度,因为该应用程序是多语言的.使用最大宽度时,动画仅在

javascript-锚标记单击在CSS滑块中不起作用

我想在我的项目中使用以下CSS滑块 http://jsfiddle.net/63w9jnqq/1/ 它不使用任何JavaScript或jQuery.当我单击除“幻灯片5”以外的任何幻灯片上的链接时,会将我带回到第一个“幻灯片5”,而不是打开新选项卡.这是CSS繁重的代码,我不知道如何解决.我可以使用额外的jQuery或JavaScrip

javascript – 从显示屏向下滑动动画：无显示：阻止？

有没有办法动画显示：无显示：阻止使用CSS,以便隐藏的div滑下而不是突然出现,或者我应该采取不同的方式？ HTML： <div id="box"> Initial Content <div class="hidden"> This is hidden content </div> </div> CSS： #box { height:auto; backgr

javascript – SVG在路径上找到点到x轴的方向(角度)

我通过在路径上移动一个对象来制作视差,并且它与getPointAtlength()一起正常工作但我还需要使用路径旋转此对象. 我需要像getPointAtLength()这样的东西,但对于角度,我得到了点的角度. Rapheal似乎有一个方法,但它对hv中创建的svg元素不友好,或者我不知道如何处理它.有任何想法吗？

javascript – 如何使用文本在图像上方创建透明的黑色叠加层？

我希望在文本上方创建一个透明的暗图像覆盖图像.在悬停时有一个很好的过渡. .study1 { background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); height: 300px; width: 400px; } .title { margin: 0 auto; width:

javascript – CSS动画：使用相对于前一个的新位置移动div

为了更好的性能,我想要替换： $('#foo').animate({ left: '+=42px' }, 500); 通过过渡(或动画)CSS3. 但是我们如何才能在CSS中的左侧属性上实现“=”？ 如何使用相对于前一个的新左侧位置移动div？ 谢谢.解决方法:在vanilla-js中你不能使用=,但你可以得到旧值： document.getElementById

javascript – 暂时绕过CSS转换

假设我有一个这样的风格,有一个过渡： #theElement { position: relative; left: 200px; transition: left 1s; } 还有一些代码： var element = document.getElementById("theElement"); function animateX(px) { element.style.left = px + "px"; } 所以,简单地

javascript – 为什么在转换完成之前触发transitionend事件？

我正在尝试设计一个网站,其中不同的信息保存在不同的div中.用户单击一个链接,当前div淡出直到透明并转换为右边,而新的淡入淡出从左边开始.我们的想法是调用一个函数,将一个“fadeOut”类添加到旧的div中,为新的类添加一个“fadeIn”类,然后从旧的div中删除额外的类,以便它可以重新

javascript – Safari在另一个转换中应用translate3d转换时隐藏元素

我注意到在最新的Safari 11.1中(在Chrome和Firefox中运行良好),当在另一个包含translate3d转换的元素中应用它时,具有translate3d转换的元素在屏幕上消失. 复制在这里： https://jsfiddle.net/chq2qfm8/66/ 视频： 解决方法:看起来Safari是新的IE,但你也可以使用translateY,它也是“3d

javascript – 没有属性更改时,jQuery中没有触发CSS转换事件

我遇到了一个有趣的案例,没有在W3C CSS Transitions规范或MDN CSS Transitions文档中明确涵盖,我认为我会分享,因为它花了我一点时间. 如果您将CSS转换属性“更改”为相同的值,则不会触发转换事件.当我想到我可以看到为什么这将是默认行为,但它很容易导致毫无戒心的开发人员的问题,

javascript – 移除Vue JS中的元素在dev中工作但不在prod中的动画

使用CSS转换我有一个组件,只要值发生变化就会有动画. 当我使用npm run dev运行时,整个过程看起来很好看,如下所示： 但是,当使用npm run build并在Nginx服务器上生成代码时,动画不起作用,并且元素只是被删除,非常快： 什么导致dev和prod之间的这种差异？有没有更好的方法来获得这种动画

javascript – Vue.js在从列表中更改所选元素时进行转换

我有一个配置文件列表,可以打开“编辑配置文件”屏幕.这个屏幕从左边滑入.当我选择一个配置文件时,如果已经选择了一个屏幕,我希望它首先滑出,更改所选的配置文件数据,然后滑入. 现在发生的事情是：当我第一次选择一个元素时,屏幕会滑入.当我更改所选元素时,屏幕会停留,不会滑出并重

javascript – Chrome无法正常显示iframe和/或转换

我有一个小项目在safari和firefox中工作正常,但不是在chrome中.这是我为网络开发的第一个项目之一,所以仍然非常新鲜.我制作了几个GIF,这将为我节省很多解释. 这在safari中正常工作： 但这是在chrome中发生的事情： 所以这不符合预期.我的第一个想法是它可能是iframe和chrome的问题,