个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我创建了一个像 DEMO 这样的切换菜单, 我想通过单击菜单按钮在隐藏和显示菜单上添加 csstransition 效果，我该怎么做？
代码如下:
<!DOCTYPE html>
<html class="" lang="en-US"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Menu Demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<header">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<div class="nav-menu">
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>
</div>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, consequuntur, nemo exercitationem in eum adipisci non eligendi sed ratione delectus nam quisquam ipsa debitis molestiae assumenda facere odit laborum officiis!</p>
</div>
</body>
</html>
最佳答案
我看到你在你的 ul 上使用了 display:none。
如果你想使用像 slideToggle orFadeIN fadeOut 这样的 jquery 转换， 它很好，但如果你想使用 css 转换，你应该有另一种方法。
你应该将 height 和/或 width 设置为 0 (取决于你想要的效果)，然后创建另一个类似的类，每次单击您都可以使用 switchClass(使用 jqueryui)或 addClass/removeClass。然后给 width/height 过渡。
和拉拉它的作品
关于css - 关于click事件的csstransition效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17512115/
25
4
0
我可能会误解这整件事，但我正在尝试使用 React 和 React Transition Group 制作一些 css 动画。 但是对于我下面的代码，退出动画 不会为嵌套的(最后一个)CSSTrans
我有一个 React 组件的动画，我无法运行它。 我认为过渡有问题，因为如果我只是一个不透明度的动画，一切都很好 我正在使用 react-transition-group 中的 CSSTransiti
我想在初始安装组件时或之后为 div 设置动画(淡入)。动画完成后，div 不应消失。我正在尝试使用 CSSTransition 组件并查看 reactcommunity.org 上的示例，但我根本无
我已经安装了 react-transition-group 并通过以下方式调用它: import { CSSTransition, TransitionGroup } from 'react-tran
我正在尝试使用 npm 包 react-transition-group 制作一个滑出式抽屉。无论出于何种原因，我似乎无法让抽屉在单击附加条件按钮时从左向右滑出。如果您可以在不使用该软件包的情况下解决
更新: 对于那些面临同样问题的人:我在 ReactTransitionGroup 的 git 页面上发现了类似的问题，其中有解决方案:https://github.com/reactjs/react-
有两页。进入页面动画正常，退出页面突然卡住了。 这是版本: "react-router-dom": "^4.2.2", “ react 过渡组”:“^4.0.1”， “ react ”:“^16.4.
使用 CSSTransition 组件和 React 我想应用淡入动画 在这里你可以找到我想要实现的一个小例子:https://codesandbox.io/s/j75712qjvy 在第一次加载时，
使用 CSSTransition 组件和 React 我想应用淡入动画 在这里你可以找到我想要实现的一个小例子:https://codesandbox.io/s/j75712qjvy 在第一次加载时，
我想在我的网络应用程序中为一个框设置动画(淡入、淡出)。我正在使用 react-transition-group为了这。但不知何故，动画不起作用。代码 import React from 'react
我正在开发轮播应用程序，我必须使用 React Transition Group动画它。出于某种原因，我似乎无法正确应用这些类。 它混合了专有代码和开源代码，所以如果这个示例还不够，我很乐意扩展我的示
我试图让登录组件在加载页面时淡入，然后在呈现新组件时淡出。根本没有褪色发生，它只是出现。我在其他帖子中读到您需要一个 key ，但我不知道在这种情况下 key 值是什么？ return (
我正在尝试使用CSSTransitionGroup(或ReactTransitionGroup)为内容在dom中出现和消失时创建垂直平滑滚动效果。 我知道使用纯 css 中的过渡来动画化这种效果的方法
尝试将 CSSTransition 添加到我的 React 应用程序中，但我遇到了这个问题。当我说唱我想要动画的元素时，它会变成空白。任何帮助，将不胜感激。这是我的代码 render() {
我正在尝试在我的元素中实现一个模态的 CSSTransition。问题是我正在使用 css 模块。 我的模态渲染方法 render() { return (
我正在从 React 调用 CSS Transition Group 属性。 在我的 js 文件中: var ReactCSSTransitionGroup = React.addons.CSSTra
“ react ”:“^16.13.1” “ react 过渡组”:“^4.3.0” 大家好。 我遇到了 findDOMNode 警告，在互联网上找不
因此，我有一小部分代码尝试添加一个动画作为 Tooltip Nodes 的包装器。但也许我做错了什么，因为我在屏幕上没有看到 mount 期间出现任何 animation。 此外，它甚至不会在 onE
我正在开发一个为图像提供交替 src 值的轮播。这确实有效，但是我无法让 React CSSTransition 正常工作，因为从技术上讲，它是同一个元素，只是具有绑定(bind)到状态变量的不断变化
我正在开发一个 React 小部件(分步向导)，它从 API 获取和显示内容。我不知道，我从 API 获取的文本有多长。所以我不知道，小部件的高度。小部件应增加与内容相关的高度(如默认的 HTML 元
我是一名优秀的程序员,十分优秀！