Loading [MathJax]/jax/input/TeX/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >基础6钻下动画速度

问基础6钻下动画速度
EN

Stack Overflow用户

提问于 2018-08-22 14:18:00

回答 1查看 296关注 0票数 0

我的目标是应用自定义动画速度到基础6钻取菜单中的基础6网站。我知道，在_settings.scss中，您可以通过$drilldown-transition更改初始单击动画，但是当返回向下钻取的级别时，动画参数将被忽略。

我检查了dist > assets > css > app.css，看看是否有其他参数或某种隐藏的CSS控制了这一点，但在我看来，它是通过JS处理的，而不仅仅是添加/删除类。

TLDR;，我想了解在返回一个级别时如何控制下钻菜单的动画速度/样式。

例：https://media.giphy.com/media/X8M8Hax10K9SslPN1v/giphy.gif

zurb-foundation

EN

回答 1

Stack Overflow用户

发布于 2018-08-23 08:36:49

接近速度是由于以下几行，可以在dist > assets > css > app.css中看到

.drilldown .is-drilldown-submenu.is-active {
    z-index: 1;
    display: block;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%); 
    }

  .drilldown .is-drilldown-submenu.is-closing {
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%); 
    }

从-100%到100%的转变太极端了，无法真正得到你所期望的流畅感。将100%简化为5%解决了这个问题。

.mobile_nav > .grid-x > .cell > .is-drilldown .drilldown .is-drilldown-submenu.is-closing {
      -webkit-transform: translateX(5%);
          -ms-transform: translateX(5%);
              transform: translateX(5%);
    }

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51975918

复制

相关文章

小钻一下 String 源码

java 编程算法 javascript

我正坐在沙发上津津有味地读刘欣大佬的《码农翻身》——Java 帝国这一章，门铃响了。起身打开门一看，是三妹，她从学校回来了。

沉默王二

2021/06/16

2890

钻钻 “单例” 的牛角尖

文件存储安全 java 编程算法 jvm

上篇文章走进 JDK 之 Enum 提到过，枚举很适合用来实现单例模式。实际上，在 Effective Java 中也提到过（果然英雄所见略同）：

路遥TM

2021/08/31

4640

Xcelsius（水晶易表）系列6——统计图钻取功能

数据处理数据分析数据可视化

今天跟大家分享的是水晶易表系列6——统计图的钻取功能。统计图通过启用钻取功能之后，可以通过鼠标单击该图表的单一序列，使图表序列成为动态选择器，鼠标单击之后会将对应序列数据传递到一个定义好的单元格位置，而利用该单元格区域位置数据所创建的图表就可以接收到动态数据源，进而完成动态交互。这种交互方式在前几篇的案例中均有讲解，第一篇中的标签式菜单通过通过设定数据源以及数据插入位置，某种程度上具有钻取功能（只是标签式菜单本事就是作为选择器，并不展示任何数据信息）。同样是在案例1中通过设置柱形图/折线图的向下钻取功

数据小磨坊

2018/04/11

1.7K0

Xcelsius（水晶易表）系列6——统计图钻取功能

【前端动画】实现动画的6种方式

渲染动画浏览器前端移动端

javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。（❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~）

前端修罗场

2023/10/07

5200

Android动画基础 | 概述、逐帧动画、视图动画

java android textview xml css

或者给<animation-list>添加android:oneshot="true"属性，也可实现：

凌川江雪

2019/05/14

4.1K0

Android动画基础 | 概述、逐帧动画、视图动画

css基础动画

每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

用户9979303

2022/10/28

2.5K0

Android动画基础详析 | 属性动画基础及ValueAnimator

textview css api android 编程算法

在上篇博客Android动画基础详析 | 概述、逐帧动画、视图动画（附诸多实际运行效果动图）的基础上我们新建一个property包和一个PropertyActivity：

凌川江雪

2019/09/30

1.5K0

Android动画基础详析 | 属性动画基础及ValueAnimator

iOS动画系列之四：基础动画之平移篇2. 创建不同速度控制的动画3. Swift版本的部分差异

最终实现的效果：基础动画之平移效果 1. 基础版的平移这里重点是为了演示fromValue／toValue 、设置layer的Position位置、实现代理方法里面设置position的区别。

stanbai

2018/06/28

2.9K0

SVG 动画精髓（下）

本文作者：ivweb villainthr 接SVG 动画精髓（上）线条动画 SVG 中的线条动画常常用作过渡屏（splash screen）中。例如：或者，一些比较炫酷的 LOGO 中，比如

腾讯IVWEB团队

2017/07/07

1.9K0

ECMAScript6 基础知识点（下）

编程算法网络安全 javascript

Symbol 为独一无二的值，当 Symbol 值作为对象的属性名的时候，不能用点运算符获取对应的值，因为用点运算符的话，会导致 JavaScript 把后面的属性名为理解为一个字符串类型，而不是 Symbol 类型

Nian糕

2020/05/18

3630

ECMAScript6 基础知识点（下）

jQuery基础--动画操作

三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title>

eadela

2019/09/29

4.2K0

「JavaScript 」动画基础 - 03

javascript 插件动画基础事件

请注意，本文编写于 2082 天前，最后修改于 173 天前，其中某些信息可能已经过时。

曼亚灿

2023/05/17

1.2K0

「JavaScript 」动画基础 - 03

「JavaScript 」动画基础 - 01

javascript 定时器动画基础事件

请注意，本文编写于 2086 天前，最后修改于 174 天前，其中某些信息可能已经过时。

曼亚灿

2023/05/17

5270

「JavaScript 」动画基础 - 01

js animate动画基础

javascript html jquery document ps

js运动是我们学习js必不可少的研究部分，首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已，比如不断改变一个绝对定位div的left值，那么你看到的效果就是这个div不断的向右边运动，那么运动的原理就是这样。

不愿意做鱼的小鲸鱼

2022/08/23

6.8K0

Unity基础动画相关

Animator与Animation区别 1.动画剪辑源文件不同 2.Animator通过AnimatorController蓝图开发，Animation没有。 3.Animation的内存占用比Animator更少

祝你万事顺利

2019/05/29

1.2K0

「JavaScript 」动画基础 - 02

javascript 定时器动画函数基础

请注意，本文编写于 2085 天前，最后修改于 173 天前，其中某些信息可能已经过时。

曼亚灿

2023/05/17

3920

CG实验6 交互与动画

(1) 示范代码1为交互实例：在鼠标点击的位置上绘制出点；示范代码2为动画实例：三角形按照恒定的速度（45度/秒）旋转。结合示范代码，学习理解交互与动画的基本思想与实现； (2) 结合示范代码1，将示范代码2改为根据鼠标来控制三角形的旋转；

步行者08

2018/10/09

6210

unity3d:动画animator，AvatarMask，边走边攻击，单独设置run动画速度

public unity3d using 动画状态机

分为3layer，run-idel层（layer0），攻击时上半身层（layer1），原地攻击层（layer2），其中layer1，layer2里面完全复制的动画状态机

立羽

2023/08/24

3560

unity3d:动画animator，AvatarMask，边走边攻击，单独设置run动画速度

linux下简单限制网卡速度

Linux下限制网卡的带宽，可用来模拟服务器带宽耗尽，从而测试服务器在此时的访问效果。

Laikee

2022/04/25

7.2K0

Python玩转简书钻

python 爬虫存储 json windows

2018年11月15号，简书迎来大变革，取消了以往的积分制度，换为去中心化的简书钻，每日发放一万简书钻。首先，简书给出了获取钻石的途径：写文点赞，与以往的阅读，评论，点赞，关注，写作都能获取积分（不同操作获取的积分不同）不一样，现在的途径更加简单和方便。其次，也说明了获取钻石的多少取决于用户的投票（钻石越多投票权重越大）。简书每天都会公布前一天的排名，通过编写代码，获取20181115到20181126的数据，并进行分析。

罗罗攀

2018/12/19

1.3K0

相似问题

基础6数据-动画

13

HighCharts钻下多个系列，如何获得钻下第二项的钻下？

10

基础6下拉菜单

213

基础6下的顶杆下坠

12

动画基础5下拉菜单

11

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例