开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

什么会导致过渡不在选定元素上触发

过渡不在选定元素上触发可能是由以下几个原因导致的：

未正确设置过渡属性：过渡效果需要通过CSS的transition属性来定义。如果未正确设置过渡属性，就无法在选定元素上触发过渡效果。例如，如果没有设置transition属性或者设置了错误的属性值，过渡效果就不会生效。
未正确设置过渡时间：过渡效果需要通过CSS的transition-duration属性来定义过渡的持续时间。如果未正确设置过渡时间，就无法在选定元素上触发过渡效果。例如，如果将过渡时间设置为0s，过渡效果就会立即完成，无法触发过渡效果。
未正确设置过渡触发事件：过渡效果需要通过CSS的transition-property属性来定义过渡触发的事件。如果未正确设置过渡触发事件，就无法在选定元素上触发过渡效果。例如，如果将过渡触发事件设置为none，过渡效果就不会触发。
未正确设置过渡状态：过渡效果需要通过CSS的transition-state属性来定义过渡的起始状态和结束状态。如果未正确设置过渡状态，就无法在选定元素上触发过渡效果。例如，如果将过渡状态设置为相同的值，过渡效果就不会触发。

总结起来，过渡不在选定元素上触发可能是由于未正确设置过渡属性、过渡时间、过渡触发事件或过渡状态所导致的。在开发过程中，需要仔细检查和调试这些设置，确保过渡效果能够在选定元素上正确触发。

腾讯云相关产品和产品介绍链接地址：

腾讯云CSS（云服务器）：https://cloud.tencent.com/product/css
腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
腾讯云CVM（云主机）：https://cloud.tencent.com/product/cvm
腾讯云VPC（私有网络）：https://cloud.tencent.com/product/vpc
腾讯云数据库：https://cloud.tencent.com/product/cdb

相关搜索:CSS和html:添加边距会导致元素不在一行中 on()上的JQuery不在附加的元素上触发一张图片上的css过渡会导致附近的图片抖动为什么#btnCrop上的"mouseup“事件会多次触发？为什么alert()调用会导致我的事件再次被触发？为什么display: flex会导致元素颠倒？为什么iOS 10上的最小高度100vh会导致大窗口？为什么不在选项元素上使用onClick 为什么在IOS上运行torchscript模型推断会导致线程错误？为什么在我的IDLE上导入Tensorflow会导致错误？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular *ngFor 列表的动画

如果你想为 ngFor 列表创建一个动画，当移除一个项目时，该项目会淡出，而其下方的剩余项目会缓慢向上滑动，你可以这样做。...用于定义触发器。字符串 "fadeOutAndShrinkAnimation" 是触发器的名称。transition(":leave", [...]) 用于为触发器定义一个过渡效果。...:leave 是一个特殊的状态，当元素离开视图时（例如被移除）应用该状态。在过渡中，使用 sequence([...]) 定义了一系列动画步骤。...用于选定具有类名 "call-notification-item" 的组件元素。query 函数通常用于为匹配特定选择器的元素定义动画。...在第一个查询中，包含以下动画序列：style({ opacity: 1 })：将选定元素的初始不透明度设置为 1。

1221 0

当面试官问你文档声明，你可以这么回答他

因为任何放在 DOCTYPE 前面的东西，比如批注或 XML 声明，会令 IE9 或更早期的浏览器触发怪异模式（后面的渲染模式会介绍）文档声明并非一个 HTML 标签。...那么为什么会这么长呢？原因很简单，HTML5 不需要引入 DTD 文件，而其他类型的文档声明是需要引入 DTD 的。很好，一个新的名词出现了，DTD。...如果文档中没有 DOCTYPE 将触发文档的怪异模式。怪异模式最明显的影响是会触发怪异盒模型。...（严格 DTD ——严格模式）包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。...（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。

5261 0

基础设施即代码：只是漂移管理还不够

作者 | Roxana Ciobanu 译者 | 平川策划 | 丁晓昀什么是配置漂移？随着公司的发展，软件生产和交付系统往往会变得越来越复杂。随着而来也会发生配置上的经常变更。...此外，这类事件会导致开发停顿，开发人员不得不立即放下手头的工作，切换环境并着手解决事件。这种中断可能会导致代码 Bug，因为我们的思路被中断了，有些想法可能会遗漏。这样就有恶性循环的风险。...你要记录好应该做哪些变更，什么时候做，以及在什么系统上做。应用基础设施变更的方法越少越好，最理想的情况是，只有一个通道可以进行更改，不管是应用、开发、过渡还是生产环境。...除了推送变更的通道外，还需清晰地定义好权限并严格执行，将审批 / 发布权限授予一组预先选定的人，他们经验最丰富，而且根据以往的情况看最值得信任。任何不符合标准的情况都可能导致配置漂移。...虽然容器镜像包含运行所需的所有代码和软件依赖，但一旦部署到云上，它常常需要额外的基础设施元素来实现可扩展性以及提高可靠性（如负载均衡器、监控、日志等）。

5192 0

Material Design — 菜单（Menus）

单个菜单项状态某些app状态可能会导致只有一个菜单项的情景菜单。例如，当使网页上的文本高亮时，Android仅显示“复制”菜单项，因为用户无法“剪切”或“粘贴”文本。 ?...不可用的例子 ---- 行为菜单出现在app内所有其他UI元素之上。 ? 菜单位于触发菜单元素的正上方，且使得当前选择的菜单项出现在触发出的菜单的顶部（如下图）。 ?...将菜单放置在触发菜单元素的下方会将其与上下文环境分开（如下图）。 ? 关闭菜单可以通过点击菜单外部或点击触发菜单的元素（如果可见）来关闭菜单。选择一个菜单项后也应该关闭菜单。...简单菜单 ·打开时，简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。当前选择的菜单项突出显示（如下图）。 ? 向下展开的简单菜单 ?...·简单菜单也应该应该显示在其触发元素上，而不是下面（如下图）。 ? ·菜单宽度取决于字符串长度，在移动设备上定义为56dp单位的倍数。

5.8K10 0

important导致TransitionGroup失效

[name]-move 类提供一个过渡样式，例如 transition: all 0.5s ease;，这样，当 TransitionGroup 内的元素位置变更后， Vue 会尝试让变动了位置的元素从老位置平滑过渡到新位置...important 的 transition 样式，会让过渡失效」我当场愣住，这在当时的我看来是一件很难理解的事情：本身过渡时 Vue 就会通过 [name]-move 为元素加上 transition...属性，为什么提前给元素加上一个优先级最高的 transition 属性，过渡反而没法生效了呢？...可以这么理解：渲染队列中存在改动而不进行重排直接获取文档宽度或高度，会导致拿到的元素宽高是过时的，所以浏览器在读取前对文档进行了重排。...但是人为添加的高优先级 transition 属性导致重排时元素没法第一时间回到旧位置，也就没有过渡效果了。

7934 0

D3库实践笔记之图表交互 |可视化系列36

常用的事件如下： •click：单击事件，鼠标单击某个元素触发，相当于mousedown和mouseup组合在一起；•dblclick：鼠标双击事件；•mouseover：鼠标的光标放在某元素上(悬停在元素上...键盘事件有三种： •keydown：当用户按下任意键时触发，按住不放会重复触发此事件，这一事件不会区分字母的大小写，例如“A”和“a”被视为一致；•keypress：当用户按下字符键(大小写字母、数字...、加号、等号、回车等)时触发，按住不放会重复触发此事件，该事件就会区分字母的大小写；•keyup：当用户松开按键时触发，该事件不区分字母的大小写； keydown和keypress事件的区别在于keydown...d3力导向图拖动效果悬停文本标签要实现鼠标悬停在图形元素上时显示其标签的tooltip效果，仍然使用选择集的on监听mouseover和mouseout事件，只是把响应的代码从修改选定的rect元素变成了增加文本标签元素...过渡动画同样通过事件监听和缓动实现过渡效果和数据更新，实现友好的交互；还有便是用好.transition()，在方法链上，要把transition的调用插到选择元素之后，改变任何属性之前。

5.3K0 0

Chrome 99新特性：@layers 规则浅析

比如: 「引入顺序导致的样式竞争问题」用过 ant design 等组件库 + 发布在 npm 上的业务组件的同学，可能会经常遇到自定义样式不生效的问题，比如像这样... /* main.module.css...导致问题变得更糟的是，如果此时触发了 hot-reload，因为打包样式无需重复插入，而我们的样式有可能被更新，就会导致字变成绿色，进而导致一些样式问题在开发阶段难以被发现。...「组件嵌套导致的样式竞争问题」有时候，尤其是在组件中，我们可能不会随机命名样式，而是将一些类型的元素固定为同一个名称，比如 .link，以方便用户在使用我们的组件时覆盖这些样式。...那么，是不是可以在计算选择器权重前，增加点什么，让它比选择器权重更优先计算，从而解决选择器权重导致的问题呢？.... */ } 层叠层中的 CSS 优先级低于不在层中的 CSS 层叠层中的 CSS 优先级更低，是考虑到这样在已有的代码中引入层叠层，会更容易一些，不太会带来很大的问题。 !

9901 0

JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

CSS 动画用CSS制作动画是让元素在屏幕上移动的最简单方法。这里将从如何让元素在 X 和 Y 轴上移动 50px 简单示例开始，通过持续 1 秒的 CSS 过渡来移动元素。...你可以专注于使用 JavaScript 管理状态，只需在目标元素上设置适当的类，让浏览器处理动画。...实际上，当事物在我们周围的物理世界中移动时，事物往往会加速或减速，因为我们不是在真空中，并且有不同的因素会影响这一点。...例如，为元素的 width 和 height 做动画会更改其几何结构并且可能会造成页面上的其它元素移动或者大小的改变，这个过程称为布局。我们在之前的一篇文章中更详细地讨论了布局和渲染。...但是，不要过度使用 will-change，因为这样做会导致浏览器浪费资源，从而导致更多的性能问题。

3.4K2 0

CSS Transitions

「触发过渡：」过渡通常在「元素的状态发生变化时触发」。例如，当我们悬停在按钮上时，可以更改其背景颜色，过渡效果将使颜色平滑地在指定的持续时间内变化。...时间函数当我们要求一个元素从一个位置过渡到另一个位置时，浏览器需要计算出每个“中间”帧应该是什么样子的。例如：假设我们正在将一个元素从左移动到右，持续1秒。...如果他们在这300毫秒窗口内重新进入元素，过渡就不会发生。在经过300毫秒后，过渡会正常启动，下拉菜单会在400毫秒内出现。...悬停效果将元素从鼠标下方移开，这会导致它再次落回鼠标下方，从而再次触发悬停效果...每秒多次。我们如何解决这个问题呢？关键是「将触发与效果分开」。...这个 span 元素包含了所有的样式（背景颜色、字体等等）。当我们悬停在这个普通的按钮上时，它会导致子元素从上方露出。然而，按钮本身是静止的。

2543 0

Vue0.11版本源码阅读系列七：补充

、遍历该自定义组件及其所有子元素进行模板编译绑定指令等等，因为我们传递了template选项，所以在第一篇里一带而过的方法_compile里在调用compile方法之前会先对这个进行处理： // 这里会把...，这里就是bind方法里创建的注释元素 target = query(target) // 元素当前不在文档中 var targetIsDetached = !..._.inDoc(target) // 判断是否要使用过渡方式插入，如果元素不在文档中则会使用带过渡的方式插入 var op = withTransition === false || targetIsDetached..._callHook('attached') } return vm } op方法会调用transition.before方法把元素插入到文档中，关于过渡插入的详细分析请参考vue0.11...版本源码阅读系列六：过渡原理。

2051 0

h5软键盘挡住输入框问题解决（android）

在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起（ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域...直接上代码，这里是react项目（css设置absolute配合js改变top实现效果，transition过渡增强用户体验，这里就不放了） getElementOffsetTop(el) {...}) }) } } 效果基本实现，这里还有两个问题：第一，如果下面的提交按钮是fixed，有些手机键盘弹出时会把按钮顶上来，如果上述代码中fixHeight设置不合适，会导致这个按钮遮挡输入框...第二，如果点击键盘上的收起键盘按钮，会导致页面top无法恢复，因为没有触发输入框失焦方法，需点击空白处恢复。...2.两个h5框架，iScroll、Native.js（虽然在这个问题上没啥用） 3.最终奥义：修改设计稿，三招 -> 使输入框不在页面的下半部分、采用分页设计、弹出输入层（ps：要和产品和设计沟通，客户不一定会让步

6.1K1 0

前端里的拖拖拽拽了解一下？

在拖动元素期间，一些与拖放相关的事件会被触发，像 drag 和 dragover 类型的事件会被频繁触发。...除了定义拖拽事件类型，每个事件类型还赋予了对应的事件处理器事件类型事件处理器触发时机绑定元素dragstartondragstart当开始拖动一个元素时拖拽dragondrag当元素被拖动期间按一定频率触发拖拽...dragleaveondragleave当拖动元素离开一个可释放目标元素放置dragoverondragover当元素被拖到一个可释放目标元素上时（100 ms/次）放置dropondrop当拖动元素在可释放目标元素上释放时放置...dragId); const dropIndex = findIndex(listData, (i) => i.id === dropId); // 通过增加对应的 CSS class，实现视觉上的动画过渡...，最终选择了 react-dnd 作为基础拖拽库，当然，在复杂的拖拽场景下，是需要自行扩展该拖拽库，上手难度相对会高一点，不过有了这些“拖拽知识”作为前置基础，那么扩展功能也就不是什么难事了。

4.7K3 0

过渡&动画概述

这些抽象的概念包括：在CSS和JS中，使用内置的transition元素组件来钩住组件中进入和离开DOM 过渡模式，以便在过渡期间编排顺序在处理多个元素位置更新时，使用transition-group...Style绑定一些过渡效果可以通过插值的方式来实现，例如在发生交互时将样式绑定到元素上。...，同时将CSS过渡属性应用在元素上，让元素知道在更新时要使用什么过渡效果。...我们可以通过对性能的了解，在web上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的property。下面介绍如何实现这个目标。...Opacity属性的行为也类似，因此他们是在web上做元素移动的理想选择。

1.6K0 0

如何实现一个丝滑的点击水波效果

>) { // 给元素上添加一个对象记录一些数据 el....，会先移除该元素的上一个水波，然后添加一个新的水波任务，这个任务会在一个60ms的定时器后执行，然后把定时器id保存起来，为什么不立即执行呢，应该是为了能够取消吧，比如想在touchmove情况下不开启水波效果...，然后设置它的透明度为0、初始位置、缩放、大小、背景颜色，然后添加为被点击元素的子元素，最后在20ms以后修改div的位置、缩放、透明度，只要设置了它的transation过渡属性即可实现过渡效果，也就是水波扩散的效果...，首先溢出需要设置为隐藏，否则水波圆的扩散就会溢出元素完整显示出来，这显然不好看，然后前面提到过水波元素为绝对定位，所以被点击元素的定位不能是静态定位，最后的层级设置笔者暂时没有想出来是为了解决什么问题...如果在60ms后再次触摸元素，执行removeRipple时_ripple.tasker不存在，会立即执行task方法，同样，这个task任务也会和松开手指触发的task任务重复。

5632 0

你可能不知道的 transition 技巧与细节

可以看到不管是过渡触发，还是过渡复位，都会等待 1 秒再触发。利用这个技巧，我们就可以实现一些过渡效果的结合。...、宽度、及下边框的变化，并且给宽度过渡动画和下边框的颜色动画设置了 0.25 秒的延迟，这样元素的高度会先进行过渡，由于整体的过渡动画世界时间也是 0.25s，所以高度过渡动画结束后，才会开始宽度过渡动画...当然，要实现签名的话，目前来看还欠缺点什么，我们需要实现鼠标 hover 到画板上不会立即开始出发元素的背景色变化，只有鼠标按下时（保持 :active 状态），才开始遵循鼠标轨迹改变颜色。...这个有个巧妙的方法可以实现，我们在画布上，再叠加一层 div，层级 z-index 比画布更高，当鼠标 hover 到画布上，其实是 hover 到这个遮罩层上，当鼠标按下，触发 :active 事件时...如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

1.2K2 0

【教程】UX中最常用的6个功能性动效，看完自己也成大神了

用户界面应该在用户点击输入框时，就准确及时地给予响应，表现出上一界面和当前界面的关系，以及哪些元素和操作导致了当前界面的出现。用户通过点击应用程序总是能知道发生了什么，这感觉很好。 ?...（元素对用户的操作意图给出了合适的回应） 2、关联新出现的界面需要和那些导致它出现的元素或操作联系起来。这种联想式关系所隐含的逻辑，能帮助用户理解刚刚在视图的布局中发生的变化和什么触发了变化。...在第二个例子中菜单从接触点出现，这就将元素关联在了接触点上。 ? 另一个例子是在特定条件下操作按钮功能的变化。“播放”和“停止”按钮可能是切换开关最常见的例子。...在屏幕上向上移动的元素应该在运动过程中出现加速的力） 4、有意图的操作指南关注的是如何在合适的地点、合适的时间给出引导提示。...（错误方式）错开和放慢过多元素的运动会延长持续时间。 ? （错误方式。图片来源：MaterialDesign）快速的动效，让用户不必等待动效完成。 ?

1.1K5 0

vue课程大全

控制更新(数据双向绑定的更新) $forceUpdate 过渡和动画单元素/组件的过渡这里是一个例子点击按钮让p标签渐渐fade褪色消失1.要在什么地方动画,就在什么地方加<transition name...在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。...v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。...或者一个渲染函数里：render: function (createElement) { return createElement('h1', this.blogTitle)}第二个中createElement 到底会返回什么呢...其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。

1.6K2 0

CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

对子元素的影响如果子元素什么都不设置的话，都会受父元素的影响，和父元素的显示效果一样，我们就来举例看看，如果子元素设置的值和父元素设置的值不同会有什么效果。例子（opacity属性） <!...黄色块div元素设置 visibility:hidden;，通过定位，虽然遮挡住了蓝色的p元素，但是当鼠标移到蓝色p元素上时，还是触发了蓝色p元素绑定的事件。...元素提升为合成层后，transform 和 opacity 不会触发 repaint，如果不是合成层，则其依然会触发 repaint。...当元素是 visibility:hidden; 时，自身的事件不会触发，所以像上面这个例子中，直接在蓝色块div元素上加 hover 事件，要去将自身的 visibility:hidden 过渡到...但是在其他元素上加事件，来将该元素的 visibility:hidden 过渡到 visibility:visible 是可以的，看例子。 <!

1.7K1 0

Tomcat 的 Server 文件配置详解！

如果deployOnStartup和autoDeploy设置为true，则tomcat启动自动部署：当检测到新的Web应用或Web应用的更新时，会触发应用的部署(或重新部署)。...如果值为true，那么当class文件改动时，会触发Web应用的重新加载。...docBase：静态部署时，docBase可以在appBase目录下，也可以不在；本例中，docBase不在appBase目录下。...JreMemoryLeakPreventionListener：与类加载器导致的内存泄露有关。...ThreadLocalLeakPreventionListener：当Web应用因thread-local导致的内存泄露而要停止时，该监听器会触发线程池中线程的更新。

1.9K4 0

Tomcat 的 Server 文件配置详解！

如果deployOnStartup和autoDeploy设置为true，则tomcat启动自动部署：当检测到新的Web应用或Web应用的更新时，会触发应用的部署(或重新部署)。...如果值为true，那么当class文件改动时，会触发Web应用的重新加载。...docBase：静态部署时，docBase可以在appBase目录下，也可以不在；本例中，docBase不在appBase目录下。...JreMemoryLeakPreventionListener：与类加载器导致的内存泄露有关。...ThreadLocalLeakPreventionListener：当Web应用因thread-local导致的内存泄露而要停止时，该监听器会触发线程池中线程的更新。

1.5K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭