标签: transitions

这非常有效:

<style type="text/css"> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }

    div:hover
    {
    width:300px;
    }
    </style>

但有没有人知道使用点击而不是悬停的方法？而不涉及JQuery？

谢谢!

我发现了烦人的bug.我试图在父元素的位置发生变化的同时动画子元素的CSS属性(在示例中它是从固定到绝对).这在Webkit浏览器中没有问题,但在Firefox(v.17.0.1)中没有动画过渡.

jsFiddle示例:http://jsfiddle.net/chodorowicz/bc2YC/5/

有什么解决方案可以让它在FF中运行吗？

编辑 它已在Firefox 34中修复 https://bugzilla.mozilla.org/show_bug.cgi?id=625289

CSS

#container {
    position:fixed; left:100px; top:100px;
}
#container.some_state_position {
    position:absolute;
}
.box {
    width:100px; height:100px;
    background:blue;
}

.some_state .box {
    background:red; width:50px; height:50px;
}

img, .box  {
    -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
    width:50%;
}

假设我有一个<div>我希望从小尺寸扩展到更大尺寸(见这个).

默认情况下,a的宽度和高度CSS3过渡<div>将从左上角开始,然后向右下方进行.但是,我希望<div>从右上角扩展到左下角.

这是我的问题:有什么方法可以让我<div>从右上角到左下角进行宽度和高度过渡？

这是一张图片来澄清我的问题.基本上,我希望我<div>像右边的框一样展开,而不是像左边的框所示的默认方式.

这是另一张图片:

我想在页面滚动过程中从uipageviewcontroller接收更新.我想知道%的transitionProgress.(当用户移动手指以进入另一页时,此值应更新).我对从一个页面到另一个页面的动画进度感兴趣,而不是通过总页数的进度感兴趣.

到目前为止我发现了什么:

• 有一个名为UICollectionViewTransitionLayout的类,它具有与我正在寻找的属性"transitionProgress"相对应的属性.可能uipageviewcontroller以某种方式实现这个方法？

• 我可以在uipagecontroller上调用以下方法,但结果只得到0!

  CGFloat percentComplete = [self.pageViewController.transitionCoordinator percentComplete];

当我在cocos2d中调用relpaceScene或pushScene时,我可以添加一些过渡到它:

[[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:1 scene:scene]];

但是当我调用popScene时,它不需要参数,也不能添加任何转换.是这样吗？如何使用所需的过渡进行popScene？

我有两个UICollectionViewLayout使用自定义UICollectionViewLayoutAttributes子类的自定义对象.这些自定义属性添加一个属性tintAlpha,该属性控制附加到每个集合视图单元格的色调覆盖视图的不透明度.

我现在想要使用UICollectionViewTransitionLayout子类在这两个布局之间进行转换.如何配置转换布局子类以tintAlpha在我的自定义布局属性上插入自定义属性？

我可以这样做:

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
     CustomLayoutAttributes *attr = [super layoutAttributesForItemAtIndexPath:indexPath];

     CustomLayoutAttributes *fromAttr = (CustomLayoutAttributes *)[self.currentLayout layoutAttributesForItemAtIndexPath:indexPath];
     CustomLayoutAttributes *toAttr = (CustomLayoutAttributes *)[self.nextLayout layoutAttributesForItemAtIndexPath:indexPath];

     CGFloat t = self.transitionProgress;
     attr.tintAlpha = (1.0f - t) * fromAttr.tintAlpha + t * toAttr.tintAlpha;

     return attr;
}

但是,这将忽略应用于当前或下一个布局中的initialLayoutAttributesForAppearingItemAtIndexPath:&属性的任何更改finalLayoutAttributesForDisappearingItemAtIndexPath:,因此实际上并不正确.据我所知,默认实现UICollectionViewTransitionLayout确定适当的from/to属性并缓存它们,或者在prepareLayout或中layoutAttributesForItemAtIndexPath:.拥有一些公共API UICollectionViewTransitionLayout以允许我们从属性对象访问这些对象是非常有用的,就好像我尝试实现我自己的逻辑关于是否使用初始/最终属性与标准属性一样必须是默认实现中的一些差异.

在布局转换期间是否有更好的方法来插入这些自定义属性？

更新:

我刚刚遇到这个场景的另一个问题.在上面的代码中,取得当fromAttr与toAttr从当前/下一个布局直接地说,collectionView是nil用于当前布局(超过过渡至少第一次运行循环).如果布局完全取决于集合视图的边界 - 例如考虑一个简单的封面流布局 - …

我正在努力尝试使用v-if平滑显示/隐藏内容的vue过渡。虽然我了解css的类和过渡，但是我可以使用不透明度或翻译等方法使内容“平滑地”显示，但是一旦动画完成（或开始播放），下面的任何html部分似乎都会“跳转” '。

我正在尝试实现与Bootstrap 4'collapse'类相同的效果-单击此处的顶部按钮之一：https : //getbootstrap.com/docs/4.0/components/collapse/

当隐藏部分显示/消失时，所有html内容都会“滑动”起来。

对于使用v-if显示的内容，可以使用Vue转换来实现吗？vue transitions文档上的所有示例，虽然具有出色的css过渡效果，但一旦过渡开始或完成，其下面的html就会跳转。

我已经看到一些使用max-height的纯js解决方案-https: //jsfiddle.net/wideboy32/7ap15qq0/134/

并尝试使用vue：https : //jsfiddle.net/wideboy32/eywraw8t/303737/

.smooth-enter-active, .smooth-leave-active {
  transition: max-height .5s;
}
.smooth-enter, .smooth-leave-to {
  max-height: 0 .5s;
}

谢谢！

我想做什么......

我正在玩D3以制作复合动画.我有以下最终状态:

基本上我想要动画连接点 - 添加第一个圆圈.然后将线条绘制到第二个圆圈.绘制线后,添加第二个圆.

为了增加一些视觉吸引力,我执行其他过渡,例如在绘制线条时更改第一个和第二个圆圈的圆半径.

我试过的......

我可以添加圆圈并单独绘制线条,包括动画.但是,我不确定如何继续将转换链接在一起以形成复合动画.

我已经阅读了有关过渡/动画的内容,建议使用each("end").虽然这可以用于绘制初始对象,但是在其他过渡之后才结束.

问题

• 使用each("end", ...)正确的方法链接转换？
• 如何启动另一个动画(即开始画线),同时仍然允许另一个过渡完成(即第一个圆半径突发).

对于仅支持iOS7的应用程序,我有一个UITableView(虽然如果有帮助的话,将它更改为UICollectionView会是学术性的),其中单元格如下所示:

+----------------------------------+=======+
| Label1                           | sub-  |
| Label2     Label3                | view  |
+----------------------------------+=======+

我想转换到第二个视图,其中子视图缩小为更大,标签位置更改,更像是这样:

          +----------+
          |          |
          | subview  |
          |          |
          +----------+
             Label1
             Label2
             Label3

这类似于iOS7日历应用程序,其中视图正在转换并在途中为部件设置动画.我知道我需要实现UIViewControllerAnimatedTransitioning,但我在概念上遇到类似这样的事情会有问题.我是否隐藏了单元格的子视图,用新视图的子视图替换它们但是在同一个地方,然后设置动画？还是有一种不太复杂的方式？任何示例代码都会受到赞赏,因为我发现的所有示例都没有从一个视图到另一个视图的子视图.

ETA:我越想到这一点,我就越想知道:使用带有流布局的UICollectionView可以更好地处理这个问题,并且只需要将细节调整为将单元格大小调整为屏幕的完整大小吗？

我正在使用自定义过渡来显示全屏模态游戏视图.当用户启动游戏时,根视图控制器缩小到"进入"屏幕,而全屏游戏视图控制器从较大比例缩放到显示器上,同时从0%不透明度转换到100%不透明度.简单!

过渡看起来很棒并且工作正常,在解雇游戏视图控制器时也正确地反转动画.

我遇到的问题是,如果在显示全屏游戏视图控制器的同时旋转设备,则在返回到根视图控制器时,布局完全是棘手的.并且进一步的旋转不能解决问题,布局是螺旋式的并且保持螺旋状.

如果我禁用自定义转换,这个问题就消失了.此外,如果我保留自定义转换,但禁用在转换动画中的源和目标视图上设置CATransform3D的调用,则问题会再次消失.

这是我的过渡代表:

class FullscreenModalTransitionManager: NSObject, UIViewControllerAnimatedTransitioning, UIViewControllerTransitioningDelegate  {

    private var presenting:Bool = true

    // MARK: UIViewControllerAnimatedTransitioning protocol methods

    func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

        // get reference to our fromView, toView and the container view that we should perform the transition in
        let container = transitionContext.containerView()
        let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
        let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!

        let scale:CGFloat = 1.075
        //let bigScale = CGAffineTransformMakeScale(scale, scale)
        //let smallScale = CGAffineTransformMakeScale(1/scale,1/scale)
        let bigScale = CATransform3DMakeScale(scale, scale, 1) …