标签: transition

我有要制作动画的文字.例如,不是在悬停,而是从白色到红色不断变化,然后再次变回白色.

这是我目前的CSS代码:

#countText{
    color: #eeeeee;
    font-family: "League Gothic", Impact, sans-serif;
    line-height: 0.9em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0px 0px 6px ;
    font-size: 210px;
}

我正在尝试从中心向左转换并降低图像的高度.高度转换工作正常,但边距只是传送到左侧而不是动画.

这是我的代码:

#logo_img {
    height: 55px;
    width: 55px;
    background-color: red;
    margin-left: auto;
    margin-right: auto;
    display: block;
    transition: all 1s ease-in-out;
}

#logo_img.tiny {
    height:45px;
    margin-left: 0;
}

JS:

$('#logo_img').addClass('tiny');

工作实例:http://jsfiddle.net/v0w6s3ms/1/

任何帮助？

我正在开发一个移动友好的网站,每次按下按钮我都有幻灯片效果转换......我找不到删除它的方法.

我尝试添加:

<script>
  $(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
      $.mobile.defaultPageTransition = 'none';
      $.mobile.useFastClick  = false;
});
</script>

和

 <a href="page.html" data-role="button" data-theme="f" data-transition="none">NEXT</a>

但我仍然有幻灯片效果转换.

我该如何删除它？谢谢!马尔科

我希望在元素变得可见时绘制动画(应该是平滑的,而不是整体)

我试过这个

states: State
{
    name: "iconOff"
    when: iconOnSwitch.checked == false
    PropertyChanges { target: selectIconRow; visible: false }
}

transitions: Transition
{
    reversible: true
    from: ""
    to: "iconOff"
    PropertyAnimation
    {
        properties: "x,y,visible"
        easing.type: Easing.InOutQuad
        from: selectIconRow
        property: "visible"
    }
}

但selectIconRow仍然会立即出现

我该如何使用这样的动画？

所以我是D3的新手,并且一般都使用JavaScript.所以我一直在关注一些目前正在使用创建基本散点图的源代码的教程.现在我的问题是当我添加更多数据集时,如何使用transition()方法移动圆圈？我希望能够设置按钮,当用户按下它们时,它会使用相应的数据集激活transition()方法.我在转换上阅读的教程仅显示了单个矩形的转换,并且手动完成,没有数据,也没有多个项目

//Width and height
var w = 900;
var h = 600;
var padding = 30;


//Static dataset
var dataset = [
    [50, 30], [300, 75], [123, 98], [70, 40], [247, 556],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
    [600, 150]
];          

//Create scale functions
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([h - padding, padding]); …

我今天遇到一个问题,试图使用CSS转换来改变对象的尺寸与calc()在IE中不起作用.或者,相反,它们的工作方式是计算值正在应用但转换规则被忽略.

在这里查看示例:http://jsfiddle.net/32Qr7/

.block {
  width: 350px; height: 100px;
  background-color: red;
  margin: 10px; padding-left: 10px;
  transition: all 1s ease-in-out;
}

.block:hover {
  width: calc(100% - 50px);
  height: calc(150px + 10%);
}

在此示例中,存在一个div,它在悬停时在一秒的过程中更改其宽度,高度和背景颜色.在IE中,背景颜色仍然可以平滑地动画,但宽度和高度变化是瞬时的.

这对我来说是一个非常大的问题,因为我有一个响应式Web应用程序,抽屉从侧面滑出,其余的布局必须调整以补偿.由于我处理多种屏幕尺寸,因此无法使用硬编码值.

(是的,我看了IE 10 + 11:使用calc()的CSS转换不希望有解决方案,但是这个问题不涉及维度更改,因此接受的解决方案对我不起作用.)

有没有人知道这个问题的解决方法,或者有任何其他建议的替代策略？我希望能够在CSS中做到这一点,并避免不得不回到使用jQuery动画技术或其他一些.

即使以下代码片段看起来很短,我也会在几天内挣扎(对我感到羞耻!)找到一种方法来缩放仅使用CSS3 点击的点transform.它现在有效:

    var current = {x: 0, y: 0, zoom: 1}, c = document.getElementById('container');
    window.onclick = function(e) {
      wx = current.x + e.clientX / current.zoom;
      wy = current.y + e.clientY / current.zoom;
      var coef = e.ctrlKey ? 0.5 : 2;
      current.zoom *= coef;    
      current.x = wx - e.clientX / current.zoom; 
      current.y = wy - e.clientY / current.zoom; 
      c.style.transform = 'scale(' + current.zoom +') translate(' + (-current.x) + 'px,' + (-current.y) + 'px)';
    };

    html, body { …

v4文档中提供的动画转换示例对我来说似乎有点费解,因为它描绘了淡入淡出相同的组件并调整背景颜色.

我正在尝试将这种技术应用于一个更真实的例子,将一个组件淡出另一个组件,但是我无法使其正常工作(它似乎只是淡出第一个,然后第二个弹出in,此转换只能以一种方式工作(后退按钮不会转换).

这是我的代码,它使用MatchWithFade示例中的精简版本:

import React from 'react';
import { TransitionMotion, spring } from 'react-motion'
import { HashRouter, Match, Miss } from 'react-router';
import Home from './components/Home';
import Player from './components/Player';
import FormConfirmation from './components/FormConfirmation';

const App = () => (
  <HashRouter>
    <div className="App">
      <MatchWithFade exactly pattern="/" component={Home} />

      <MatchWithFade pattern="/player/:playerId" component={Player} />

      <MatchWithFade pattern="/entered" component={FormConfirmation} />

      <Miss render={(props) => (
        <Home players={Players} prizes={Prizes} {...props} />
      )} />
    </div>
  </HashRouter>
);

const MatchWithFade = ({ component:Component, ...rest }) …

UIViewAnimationTransitionCurlUp然而,我有一个工作过渡使用,我希望动画中途停止,就像地图应用程序...有关如何实现这一点的任何想法？

过渡代码,

d3.select('chart').select('svg')
    .selectAll("circle")
    .data(sampleData)
    .enter().append('circle')
    .each(function (d,i) 
           {
                d3.select(this)
                  .transition()
                  .delay(i*50)
                  .attr('cx', function(d) {return d.x;})
                  .attr('cy', function(d) {return d.y;})
                  .attr('r', 4);
           });

如何停止/取消预定/延迟交易？