标签: transition

好的,所以我不明白为什么这不会缓和,只有:(快速查看,只需将其粘贴到http://htmledit.squarefree.com,例如)

<style>
#over {
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg);
height:150px;
width:150px;
}

#in {
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
height:150px;
width:150px;
}

#in:hover {
opacity: 0;
transition: opacity .3s ease-in-out;
}

</style>

<div id="over">
<div id="in"></div
</div>

在D3中是否可以转换组？

使用方形或圆形,它可以这样工作:

mySquare
  .transition()
  .attr("x",320);

但是,如果mySquare例如是对组("<g>")的引用,则它不起作用,可能是因为D3查找了我无法检索的组的x属性.

你能帮助我吗？我找不到任何关于这个主题的文档.

在"材质UI 过渡"文档中,有一些按钮触发过渡的示例.我有一个按钮触发状态更改的情况,我希望以前的数据转换出来,然后转换新的数据.我发现这样做的唯一方法是setTimeout.有没有更好的办法？

在CodeSandbox中

import React from "react";
import Slide from "@material-ui/core/Slide";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

const words = ["one", "two", "three"];
const transitionDuration = 500;

class TransitionCycle extends React.Component {
  state = {
    activeIndex: 0,
    elementIn: true
  };

  onClick = () => {
    this.setState({
      elementIn: false
    });
    setTimeout(() => {
      this.setState({
        elementIn: true,
        activeIndex: (this.state.activeIndex + 1) % words.length
      });
    }, transitionDuration);
  };

  render() {
    const { activeIndex, elementIn } = this.state;

    return …

我可以使用iPad SDK中是否包含"翻页"转换？或者是全部用核心图形手工编码？

有没有人对构建两个给定DFA的并集算法有直截了当的描述？例如,假设我们有两个DFA超过{0,1}

{w|w has an odd number of characters}
  w has states A and B

delta | 0  | 1
----------------
  A   | B  | B
----------------
  B   | A  | A


{x|x has an even number of 1s}
  x has states a and b

delta | 0  | 1
----------------
  a   | a  | b
----------------
  b   | b  | a

我有一个结果转换表显示联合:

delta | 0  | 1 
----------------
  Aa  | Ba | Bb
----------------
  Ab  | Bb | Ba
---------------- …

我的应用程序仅支持横向右侧方向.

我正在尝试转换到视图控制器的视图,但是当它执行过渡动画(例如卷曲)时,视图旋转90度(因此,模拟器仍处于横向右方向,但视图显示为旋转到90度).转换完成后,它将旋转到正确的方向.我的代码如下.

- (IBAction)buttonTouched
{
    MyViewController *aViewController = [[MyViewController alloc] initWithNibName:NSStringFromClass([MyViewController class]) bundle:nil];

    [UIView transitionFromView:self.view 
                        toView:aViewController.view 
                      duration:2 
                       options:UIViewAnimationOptionTransitionCurlUp 
                    completion:NULL];
}

看起来好像视图没有获得"方向已更改"通知,因此它以纵向显示,然后在动画结束后更改为横向.我已经在IB中进行了设置,所以它都是在景观中布局的.

编辑:我也尝试将视图控制器添加到自己的IB文件并转换到该视图(想想可能在初始化和转换之间过于接近)但是同样的事情发生了.

是否有脚本/方式,使普通的CSS :hover更流畅？

想法是,你有两个类可能有渐变背景,脚本可以顺利交换类.所以渐变看起来就像按下按钮一样.应该是自动的,所以你调用触发器:$('.someclass').SmoothTransition();它会自动使用.someclass:hover作为第二个类.

赏金编辑

这实际上是一个非常有趣的问题,得到了我的部分答案.我的答案的问题是,它仅适用于纯色背景颜色,不适用于CSS渐变或任何其他更具体的参数.

这个脚本应该是任何jQuery开发者库中的"必备".所以,我向任何人提供150个代表,他们可以想办法或找到好的资源,可以做到这一点.

如果您的方法(单个jQuery插件)适用于所有这些示例,那么您就赢了!

示例:http://jsfiddle.net/4pYWD/

现代编辑

由于这个问题在2011年被问到,当CSS过渡时,商业游戏不是一种选择.然后明白,为什么一切都集中在JS而不是CSS,在这个问题上.从这些答案中,我开发了一个JS脚本,当时是完美的.它不再是,CSS转换现在是最终的解决方案,所以正确的答案被重新接受.

大家好,我正在尝试进行转换,当你悬停背景变成紫色,文字颜色变成白色.(原来没有背景颜色,文字颜色是黑色......)

但它不起作用!

我做错了什么!？

a:hover {
    color: white;
    -webkit-transition: color 1000ms linear;
    -moz-transition: color 1000ms linear;
    -o-transition: color 1000ms linear;
    -ms-transition: color 1000ms linear;
    transition: color 1000ms linear;
    background-color: purple;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

所以///编辑,因为每个人都告诉我将其添加到a而不是:hover ...

初始状态:

text-color:black;
background:none;

悬停状态:

顺利过渡到:

 text-color:white;
background:black;

我希望这能帮助大家感谢您的时间!

我有一个基本上看起来像这样的应用程序

<div ui-view="header">
<div ui-view="main">
<div ui-view="footer">

现在,页脚将对应用程序的所有不同状态保持不变,但标题将在某些状态中更改,但也会在许多州共享内容.唯一ui-view会改变所有州的是ui-view="main".

目前我$stateProvider看起来像这样(页脚尚未实现):

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('root',{
      url: '',
      abstract: true,
      views: {
        'header': {
          templateUrl: appHelper.views+'/header.html',
        },
      }
    })
    .state('root.home', {
      url: '/',
      views: {
        'header': {
          templateUrl: appHelper.views+'/header.html',
        },
        'main@': {
          templateUrl: appHelper.views+'/home.html',
          controller: 'HomeController as homeVm',
        }
      },
      resolve: {
        posts: function(dataService) {
          return dataService.getPosts();
        },
        artists: function(dataService) {
          return dataService.getArtists();
        }
      }
    })
    .state('root.artist', {
      url: '/artist/:slug',
      views: {
        'header@': {
          templateUrl: …

上下文:我div在页面的顶部显示/隐藏按钮.的div是按钮下和内容的上方.我已经习惯transition-group了其余内容div在显示/隐藏时向上/向下滑动.内容有一个margin-top限制自己从div显示/隐藏的上述内容.

需要:我想要一个上边距,div这样当它显示时,它会保留自身和按钮之间的空间. https://imgur.com/UG5iakC

问题:我尝试了两种方法:

1)在隐藏处放置边距顶部div. 因为我position:absolute对div隐藏,当它使内容得到过div的div大小调整为内容的大小,所以Margin获取自动变小; 因此,当隐藏它时,边缘会在隐藏之前变小,而且很难看. GIF:https://gph.is/2QInDfj

2)添加hr上面的div,里面的transition-group.没有它hr,幻灯片就像预期的那样工作div.但是,当我加入hr并点击隐藏div,滑动发生,正如预期,但div并hr瞬间消失,而不是它在显示和内容滑过并覆盖它. GIF:https://gph.is/2yd4JGt

期望的视觉效果没有保证金/小时:https: //gph.is/2OPZyFV

HTML

<transition-group name="slide">
    <hr class="m-0" v-if="isVisible" key='h'>
    <div class="d-flex" …